CSS和HTML表單布局

在Web開發(fā)中，使用CSS和HTML創(chuàng)建表單布局是很常見的需求，CSS可以幫助我們設計美觀的表單，而HTML則提供了表單的結構，下面是一個簡單的示例，展示如何使用CSS和HTML來創(chuàng)建一個基本的表單布局。

HTML部分：

<div class="container">
  <form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">郵箱:</label>
    <input type="email" id="email" name="email">
    <br>
    <label for="message">留言:</label>
    <textarea id="message" name="message"></textarea>
    <br>
    <input type="submit" value="提交">
  </form>
</div>

CSS部分：

.container {
  width: 300px;
  margin: 0 auto;
}
#myForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#name, #email, #message {
  margin-bottom: 10px;
}

在這個示例中，我們首先使用HTML創(chuàng)建了一個包含姓名、郵箱、留言和提交按鈕的表單，我們使用CSS來美化這個表單，通過設置容器的寬度和居中顯示，以及使用Flexbox布局來垂直排列表單元素，每個輸入字段和文本區(qū)域下面都設置了一定的間距，以確保表單的整體美觀和可讀性。