橫向下拉表單是一種經常被使用的網頁表單效果。HTML5提供了一種簡單的方式實現這種效果。下面是一段實現橫向下拉表單的HTML5代碼:
<form><label for="name">姓名:</label><input type="text" name="name" id="name" /><label for="age">年齡:</label><input type="number" name="age" id="age" /><label for="position">職位:</label><select id="position" name="position"><option value="CEO">CEO</option><option value="CTO">CTO</option><option value="CFO">CFO</option><option value="CMO">CMO</option></select><label for="salary">薪資:</label><input type="range" id="salary" name="salary" min="10000" max="50000" step="1000" /></form>
這段代碼使用了常規的HTML標簽,添加了一些新的屬性和元素。其中,label元素用于與表單元素關聯,使其可點擊。input元素用于文本輸入,select元素用于選擇下拉菜單,range元素用于拖動設置數值范圍。通過這些元素和屬性,可以輕松實現橫向下拉表單效果。
上一篇html5比心小人代碼
下一篇react內聯css