html表單元素介紹
阿新 • • 發佈：2018-12-04
單選按鈕radio
<!-- 單選按鈕--> 性別： <input type="radio" name="group1" value="boy" />男 <input type = radio name = "group1" value = "girl"/>女 你是： <input type="radio" name="Question2" value="90"/>90後 <input type="radio" name="Question2" value="00"/>00後 <input type="radio" name="Question2" value="else"/>其他
1、對於單選按鈕radio，加上跟沒加上value屬性值有什麼區別？
在這裡，對於初學者，我只能說一句，關於HTML表單這一章，初學者有不少疑惑的地方。就像單選按鈕radio，其實表面上加value屬性值跟沒加是沒什麼區別的（外觀上）。之所以加value是為了方便像伺服器端傳遞資料，這個是屬於後端技術的內容。所以大家請按部就班聽從站長，哪些地方該加什麼就加什麼，以便初學者養成一個良好的程式碼編寫習慣。
label標籤
作用：用於繫結一個表單元素，當單機label標籤的時候，被繫結的表單袁術就會獲得焦點
和input標籤搭配使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!--label標籤的使用--> <label>輸入賬號：<input type="text"/></label><br /> <!--影象按鈕--> <input type="image" src=""/> <!--下拉選單--> 籍貫： <select> <option>---請選擇籍貫---</option> <option>北京</option> <option selected="selected">上海</option> <option>南京</option> </select> <br> <!-- 單選按鈕--> 性別： <input type="radio" name="group1" value="boy" />男 <input type = radio name="group1" value= "girl" checked="check" />女 <br> 你是： <input type="radio" name="Question2" value="90"/>90後 <input type="radio" name="Question2" value="00"/>00後 <input type="radio" name="Question2" value="else"/>其他 <br /> <!-- 複選框--> <input type="checkbox" id = "one"checked="checked"/><label for="one">蘋果</label> <input type = "checkbox" id = "two"/><label for="two">香蕉</label> <input type = "checkbox" id = "three" /><label for="three">檸檬</label> </body> </html>
<!--html5的版本--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header>語意：定義頁面的頭部 ,頁首</header> <nav> 語意：定義導航欄</nav> <footer>語意：定義頁面底部，頁尾</footer> <article>語意：定義文章</article> <section>定義區域</section> <aside>定義其所處內容之外的內容，側邊</aside> <input type="text" value="輸入明星" list="star"> <datalist id="star"> <option>張三</option> <option>劉德華</option> <option>劉若英</option> <option>劉曉慶</option> <option>郭富城</option> <option>張學友</option> <option>張傑</option> </datalist> <br /> <br /> <!--fieldset元素可將表單內的相關元素分組，打包，配合legend搭配使用 --> <fieldset> <legend>使用者登入</legend> 使用者名稱:<input type="text" /><br> <br> 賬號：<input type= "password"> </fieldset> <br/> <br/> <fieldset> <legend>HTML5新增的input type型別</legend> 郵箱：<input type = "email"> <br /> 手機:<input type =""tel" /><br> 數字：<input type ="number" /><br /> url:<input type="url"><br /> 搜尋：<input type="search" /><br /> 區域：<input type="range" ><br/> 小時分鐘：<input type ="time"><br /> 年月日：<input type="date" /><br> 時間：<input type="datatime" /><br> 月年：<input type = "month"><br /> 星期 年<input type="week" /> <input type= "submit" /> </fieldset> </body> </html>
<!--常見新屬性-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
使用者名稱：<input type="text" placeholder="請輸入使用者名稱" autofocus="autofocus">
檔案上傳<input type="file" multiple="multiple">
<!--必填項-->
<input type="text" required="required">
<input type="text" accesskey="s">
</body>
</html>