HTML調查表是一個常見的網頁元素,可以收集用戶反饋和數據。在本文中,我們將簡單介紹HTML調查表的代碼框架和樣式。
首先,我們需要創建一個HTML表單。代碼如下:
<form> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <br><br> <label for="age">年齡:</label> <input type="number" id="age" name="age"> <br><br> <label for="sex">性別:</label> <select id="sex" name="sex"> <option value="male">男</option> <option value="female">女</option> </select> <br><br> <label for="food">你最喜歡的食物:</label> <input type="radio" id="food1" name="food" value="pizza"> <label for="food1">披薩</label> <input type="radio" id="food2" name="food" value="burger"> <label for="food2">漢堡</label> <input type="radio" id="food3" name="food" value="noodle"> <label for="food3">面條</label> <br><br> <label for="comment">留言:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea> <br><br> <input type="submit" value="提交"> </form>
在這個表單中,我們定義了四個輸入項:姓名,年齡,性別和食物偏好。我們還添加了一個留言框以供用戶進行評論和意見。
現在,我們需要為表單添加樣式。代碼如下:
<style> form { background-color: #fff; border-radius: 5px; padding: 20px; } label { display: inline-block; margin-bottom: 5px; } input, select, textarea { padding: 5px; border: none; border-radius: 3px; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); width: 100%; margin-bottom: 10px; font-size: 16px; } input[type="submit"] { background-color: #007bff; color: #fff; font-weight: bold; cursor: pointer; } </style>
這個樣式表將使表單具有干凈,現代的外觀。我們設置了表單的背景色,邊框半徑和填充內邊距。我們還設置了標簽和輸入字段的樣式,以使它們看起來更加現代化和易于閱讀。最后,我們還為提交按鈕添加了一個漂亮的藍色背景和白色字體。
在HTML調查表的構建過程中,配合合適的CSS樣式,可以使它看起來更美觀和易于使用。在實際應用中,可以根據需求修改代碼和樣式,以適應更多的場景。