1.單選框代碼
<span>性別:</span>
<input name="sex" value="" type="radio">男
<input name="sex" value="" type="radio">女
需要注意的是單選框name值需保持一致
樣式:
![](/d/20211016/bf89eef26afbe4c7aa6a3b0ab7d87361.gif)
復選框
2.復選框代碼
<span>喜歡的類型:</span>
<input type="checkbox">嫵媚的
<input type="checkbox">可愛的
<input type="checkbox">小鮮肉
<input type="checkbox">老臘肉
<input type="checkbox">都喜歡
如需要進行form表單提交 則需要name的屬性一樣
樣式:
![](/d/20211016/9bdf4063d7e6f8d6524f827c837f4c5d.gif)
文本框
3.文本框代碼示例
<span>所在地區(qū):</span>
<input type="text">
代碼運行界面樣式:
![](/d/20211016/85fa8d8907520b8277f708837a31ef99.gif)
文本域
4.文本域代碼示例
<span class="te2">自我介紹:</span>
<textarea rows="2" cols="21"></textarea>
注意點:
rows相當于height , cols相當于width
若想設置為禁止拖動則添加代碼
<textarea style="resize:none;"></textarea>
代碼運行示例:
![](/d/20211016/9d3038461a97701b95137ed9f1000f61.gif)
下拉菜單
5.下拉菜單代碼示例:
<select name="" id="">
<option value="" disabled selected hidden>--請選擇月--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
注意點:disabled selected hidden這是設置下拉菜單默認提示文字
代碼運行演示:
![](/d/20211016/4ef1645c99b4a86fbcf52c8042b6bb21.gif)
到此這篇關于HTML5輸入框下拉菜單功能的示例代碼的文章就介紹到這了,更多相關HTML5輸入框下拉菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!