HTML連載7-表單練習
昨天由於晚上有事情，未更新，可是今天中午發也不晚，由於是同一天只是時間遲早而已，所以今日傍晚還將更新一次，廢話很少說。html
1.表單的綜合練習，咱們要建立一個綜合的註冊頁面。運用到咱們前面所學的全部知識。git
咱們整理一下思路：github
首先練習了帳號密碼的輸入，屬性爲text爲文本框，屬性爲password的爲暗文文本框輸入微信
第二，單選框輸入屬性爲radio，默認選擇選項checked屬性爲checked，不一樣選項之間互斥爲name屬性的值必須相等。多選框輸入屬性爲checkbox。ui
第三，輸入框爲textarea標籤，裏面rows屬性定義最多行，cols屬性定義最多列。spa
第四，屬性值爲date表明日曆，屬性爲email表明爲郵箱（必包含@），屬性爲number，表明本框只能輸入數字，屬性爲submit,表明提交信息到指定系統，屬性值爲reset表明從新提交信息，其中submit和reset中還能夠有value屬性來定義這個按鈕的名稱。button屬性來添加按鈕。orm
第五，傳輸信息有兩個要點：htm
（1）form標籤中action屬性值必包含傳輸信息到系統的名稱blog
（2）利用name屬性來提示會有哪些值被傳入到了咱們的目的地，其中有一點就是單選框和多選款，能夠經過在加入value屬性來講明傳入的值。只有button屬性的不能傳入值ip
第6、在form標籤後面緊跟field標籤來指定表單區域，後面緊跟legend表明表單的標題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d50&51_form_exercise</title>
</head>
<body>
<form action="www.baidu.com">
<fieldset>
<legend>註冊界面</legend>
帳號：<input type="text" id="d1" name="account">
<br>
密碼：<input type="password" id="d2" name="password">
<br>
性別： <input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="screct">保密
<br>
愛好： <input type="checkbox" checked="checked" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="message">按摩
<input type="checkbox" name="hobby" value="run">跑步
<input type="checkbox" name="hobby" value="bungee jumping">蹦極
<input type="checkbox" name="hobby" value="hit on a girl">撩妹
<br>
簡介：
<textarea cols="30" rows="10" name="description"></textarea>
<br>
生日：<input type="date" name="birthday">
<br>
郵箱： <input type="email" name="mail">
<br>
移動電話： <input type="number" name="phoneNumber">
<br>
<input type="submit" value="立刻註冊">
<input type="reset" value="清空全部信息">
<br>
<input type="button" value="瞎按">
</fieldset>
</form>
</body>
</html>
2、源碼
d50&51_form_exercise
地址：https://github.com/ruigege66/HTML_learning/blob/master/d50%2651_form_exercise
歡迎關注微信公衆號：傅里葉變換
- 1. HTML連載71-翻轉菜單練習
- 2. html表單練習
- 3. HTML表單簡單練習
- 4. HTML註冊表單練習
- 5. html表單的練習
- 6. HTML表單表格綜合練習
- 7. html 表單練習 博客_練習：創建一個簡單HTML5表單
- 8. HTML練習——表格
- 9. HTML 連接、表單【實用】
- 10. HTML超連接和表單
- 更多相關文章...
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML連載71-翻轉菜單練習
- 2. html表單練習
- 3. HTML表單簡單練習
- 4. HTML註冊表單練習
- 5. html表單的練習
- 6. HTML表單表格綜合練習
- 7. html 表單練習 博客_練習：創建一個簡單HTML5表單
- 8. HTML練習——表格
- 9. HTML 連接、表單【實用】
- 10. HTML超連接和表單