<form action="#" method="post">placeholder:輸入表單是提供一個提示<input type="text" value="" name="text" placeholder="placeholder提供一個提示"/><br />required：這個屬性可以用于任何表單控件，它指示一個域是必要的，所有對于設置了這個屬性的控件，如果沒有為這個控件指定一個值，就無法正常提交表單。在支持這個屬性的瀏覽器中，如果沒有為required屬性的域指定一個值，提交表單時你會得到一個錯誤消息，表單不會提交到服務器。<input type="text" placeholder="提示信息" required /><br />文本輸入框：<input type="text" value="" name="text" /><br />密碼輸入框：<input type="password" value="123456" /><br />文件上傳控件：<input type="file" /><br />單選按鈕：<input type="radio" name="radio" id="radioA" value="單選" checked/><label for="radioA">單選一</label><label><input type="radio" name="radio" value="不選" />單選二</label> <br />
fieldset：設置一個分組，legend是一個標題<fieldset><legend>多選框</legend><label><input type="checkbox" name="checkbox" value="多選一" />多選一</label><label><input type="checkbox" name="checkbox" value="多選二" />多選二</label></fieldset><br />多選列表控件：<select multiple> <option>襄陽</option><option>武漢</option> <option>長沙</option><option>岳陽</option> </select><br />下拉列表：
optgroup是設置一個選項分組<select><optgroup label="湖北省"> <option>襄陽</option><option>武漢</option></optgroup><optgroup label="湖南省"><option>長沙</option><option>岳陽</option></optgroup> </select><br />文本區：<textarea rows="10" cols="40"></textarea><br />數字輸入：<input type="number" min="0" max="20" /><br />范圍輸入：<input type="range" min="0" max="30" step="1" value="2"/><br />顏色輸入：<input type="color" /><br />日期：<input type="date" /><br />
Email輸入：<input type="email" /><br />Tel輸入：<input type="tel" /><br />URL輸入：<input type="url" /><br />
type屬性為email、tel、url時，與text沒太大變化，是text的一個變種。不過在移動設備上可以看出效果，比如tel值，移動設備檢測到后會默認顯示數字鍵盤
</form>

?

例子樣式：

?

轉載于:https://www.cnblogs.com/wind-wang/p/6062451.html

總結

以上是生活随笔為你收集整理的form表单中的常用控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。