HTML和CSS是網頁開發中非常重要的兩個語言，可以用來創建和美化網頁。其中，表單頁面是網頁開發中至關重要的一個功能，它可以讓用戶在網頁上填寫信息并提交給服務器。下面我們來學習如何使用HTML和CSS來創建一個簡單的表單頁面。
<!DOCTYPE html>
<html>
<head>
<title>表單頁面</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>標簽來創建一個表單，包含了姓名、郵箱和留言三個輸入框，其中姓名和郵箱是文本框，留言是多行文本框。最后，我們使用<input>標簽來創建一個提交按鈕。
這樣，我們就成功創建了一個簡單的表單頁面，并用CSS樣式進行美化。當用戶填寫完信息并提交時，該信息將提交到服務器進行處理。表單頁面在網頁開發中具有重要的作用，它可以用來收集用戶的反饋和信息，為網站運營提供重要的數據參考。
上一篇mysql3種引擎的差別
下一篇mysql3張表聯合查詢