HTML和CSS是網(wǎng)頁(yè)開(kāi)發(fā)中非常重要的兩個(gè)語(yǔ)言，可以用來(lái)創(chuàng)建和美化網(wǎng)頁(yè)。其中，表單頁(yè)面是網(wǎng)頁(yè)開(kāi)發(fā)中至關(guān)重要的一個(gè)功能，它可以讓用戶在網(wǎng)頁(yè)上填寫(xiě)信息并提交給服務(wù)器。下面我們來(lái)學(xué)習(xí)如何使用HTML和CSS來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的表單頁(yè)面。
<!DOCTYPE html>
<html>
<head>
<title>表單頁(yè)面</title>
<style>
/* CSS樣式 */
form {
margin: 0 auto;
width: 400px;
}
label {
display: block;
font-size: 18px;
margin-top: 20px;
}
input[type="text"], textarea {
width: 100%;
padding: 10px 20px;
font-size: 16px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
input[type="submit"] {
background-color: #1abc9c;
border: none;
color: white;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #16a085;
}
</style>
</head>
<body>
<form action="#" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">郵箱：</label>
<input type="text" id="email" name="email" required>
<label for="message">留言：</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>在上面的代碼中，我們首先定義了CSS樣式，其中包括了表單的布局、字體大小、輸入框的樣式等。接著，在HTML文件中，我們使用<form>標(biāo)簽來(lái)創(chuàng)建一個(gè)表單，包含了姓名、郵箱和留言三個(gè)輸入框，其中姓名和郵箱是文本框，留言是多行文本框。最后，我們使用<input>標(biāo)簽來(lái)創(chuàng)建一個(gè)提交按鈕。
這樣，我們就成功創(chuàng)建了一個(gè)簡(jiǎn)單的表單頁(yè)面，并用CSS樣式進(jìn)行美化。當(dāng)用戶填寫(xiě)完信息并提交時(shí)，該信息將提交到服務(wù)器進(jìn)行處理。表單頁(yè)面在網(wǎng)頁(yè)開(kāi)發(fā)中具有重要的作用，它可以用來(lái)收集用戶的反饋和信息，為網(wǎng)站運(yùn)營(yíng)提供重要的數(shù)據(jù)參考。