首先上最終頁面效果圖：
下面是製作的詳細步驟：
1.新增個人資訊
個人資訊
姓名： 此時會出現如下效果頁面：
2.在個人資訊後面新增性別選擇資訊
請選擇性別男女
此時會出現如下效果頁面：
3.新增意見輸入框和提交按鈕(下面加粗**)，完整表單的**如下所示：
個人資訊
姓名：
請選擇性別男女
意見
請提出意見及建議：
提交
此時會出現如下效果頁面：
此時會出現如下效果頁面：
5.第二步，拉開上下區塊的間距：.
background-color:#fff;
margin-top: 10px;
margin-bottom: 10px;
6.設定姓名、郵件位址、意見和它們的輸入框兩行顯示，並且最大寬度為20em。
為了區別於性別中的label和input，我們它們加上不同的類，field-text 和field：
姓名：男
女請提出意見及建議：
新增css**如下：
.field-text
.field-text label,.field-text input,.field-text textarea
此時會出現如下效果頁面：
8.輸入框獲得聚焦效果：藍色邊框且周圍有藍色陰影
.field-text input:focus,.field-text textarea:focus{
box-shadow:0 0 .5em rgba(93, 162, 248, 0.5);
border-color: #5da2f8;
此時會出現如下效果頁面：
9.拉開性別的單選按鈕和文字的間距
.field input {
margin-right: 0.75em;
10.最後：修飾提交按鈕
button{
border:0;
padding:.5em 1em;
cursor:pointer;
border-radius:.25em;
color:#fff;
background-color:#173b6d;
font-size:1em;
至此，該案例便完成了：
樣式 輸入框 輸入框和表單設計
輸入框允許使用者在 ui 中輸入文字。它們通常出現在表單和對話方塊中。輸入框元件設計應該為互動提供清晰的啟示，使輸入框在布局中易於發現 高效地填充和可訪問。以下是輸入框的基本元素 容器 可互動輸入區 輸入文字 輸入文字字段 標題 告訴使用者這個輸入框該輸入什麼內容 佔位符文字 為使用者提供輸入文字前...
修改input輸入框的樣式
修改input輸入框的樣式 我們在寫表單的時候，經常需要自定義表單的樣式，當然input輸入框也不例外，那麼如何能寫出好看一點的輸入框呢？下面我們來寫個簡單的表單 首先要將input輸入框的預設樣式去掉 然後我們加上邊框和圓角，並設定input的高度和字型大小和顏色 font size 1.4em ...
輸入框輸入有誤時顯示紅色邊框
達到目的 list選擇，顯示1 5條引數，每條引數輸入時檢測輸入是否有誤，輸入有誤則方框變紅，且頁面顯示報錯 最開始在網上找到的方法便是獲取id，然後改變屬性，但是此種方式比較適合少量的確定的div或其他型別，但是這裡的list列表至少10條以上，每條的引數名稱和數量不盡相同。通過v bind切換c...