生活随笔
收集整理的這篇文章主要介紹了
html基础元素案例笔记（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS FlexBox test
</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body><h4>青春不常在，抓緊談戀愛
</h4><table><form><tr><td>性別
</td><td><input type="radio" name="sex" value="man" id="nan"/><label for="nan"><img src="./img/man.png" width="7%" height="7%"/> 男
</label><input type="radio" name="sex" value="woman" id="nv"/><label for="nv"><img src="./img/man.png" width="7%" height="7%"/> 女
</label></td></tr><tr><td>生日
</td><td><select><option>請選擇年份
</option><option>2021
</option><option>2020
</option><option>2019
</option><option>2018
</option></select><select><option>請選擇月份
</option><option>1
</option><option>2
</option><option>3
</option><option>4
</option></select><select><option>請選擇日期
</option><option>11
</option><option>12
</option><option>13
</option><option>14
</option></select> </td></tr><tr><td>所在地區
</td><td><input type="text" name="location" value="北京海淀"/></td></tr> <tr><td>婚姻狀況
</td><td><input type="radio" name="merry" id="state1" checked="checked"/><label for="state1">未婚
</label><input type="radio" name="merry" id="state2"/><label for="state2">已婚
</label><input type="radio" name="merry" id="state3"/><label for="state3">離婚
</label></td></tr><tr><td>學歷
</td><td><input type="text" value="博士"/></td></tr> <tr><td>喜歡的類型
</td><td><input type="checkbox" name="like-type" id="type-name1"/><label for="type-name1">嫵媚的
</label><input type="checkbox" name="like-type" id="type-name2"/><label for="type-name2">可愛的
</label><input type="checkbox" name="like-type" id="type-name3"/><label for="type-name3">小鮮肉
</label><input type="checkbox" name="like-type" id="type-name4"/><label for="type-name4">老臘肉
</label><input type="checkbox" name="like-type" id="type-name5" checked="checked"/><label for="type-name5">都喜歡
</label></td></tr> <tr><td>自我介紹
</td><td><textarea>請輸入自我介紹
</textarea></td></tr> <tr><td></td><td><input type="submit" value="免費注冊"/></td></tr><tr><td></td><td><input type="checkbox" name="provision" id="agree" checked="checked"/><label for="agree">我同意隱私條款和會員加入標準
</label></td></tr></form><tr><td></td><td><a href="https://www.baidu.com" target="_blank">我是會員，立即登錄
</a></td></tr><tr><td></td><td><h3>我承諾
</h3><ul><li>年滿18
</li><li>嚴肅認真
</li><li>態度真誠
</li></ul></td></tr></table>
</body></html>
里面有幾個值得注意的點，關注一下：
區域內點擊均可選中，使用了label標簽及其for屬性，和input標簽的id屬性對應起來。
注意，for和id的屬性是一對一綁定的，所以不要在表單范圍內重名。
使用checked屬性，固定默認選擇，例如單選、復選框等。（在下拉菜單，是option屬性selected）對于text輸入標簽，其value屬性能夠設置默認顯示內容，例如北京海淀。注意表單的提交，需要在表單內使用input等，然后使用submit提交。對于單選框和復選框，需要使用相同的name，才能實現多個中選擇一個。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的html基础元素案例笔记（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
