HTML&CSS基礎-表單簡介
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單簡介</title> </head> <body> <!-- 表單的作用就是用來將用戶信息提交給服務器的，比如:百度的搜索框，注冊，登錄這些操作都需要填寫表單。 使用form標簽創建一個表單，form標簽中指定一個action屬性，該屬性指向的是一個服務器的地址，當我們提交表單時會提交到action屬性對應的地址。 使用from創建的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項。 --> <form action="target.html"> <!-- 在表單中可以使用fieldset來為表單項進行分組，可以將表單項中的同一組放到一個fieldset中。 --> <fieldset> <!-- 在fieldset中可以使用legend子標簽來指定組名 --> <legend>用戶信息</legend> <!-- 在HTML中還為我們提供了一個標簽，專門用來選中表單中的提示文字的label標簽。 該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值。綁定后可以當點擊具體的id標簽文字時會選中該標簽。 --> <label for="user">用戶名:</label> <!-- 使用input來創建一個文本框，它的type屬性是text。 如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性，name表示提交內容的名字。 用戶填寫的信息會附在url地址后面以查詢字符串(屬性名=屬性值)的形式發送給服務器，例如:"https://node101.yinzhengjie.org.cn?username=Jason&passwd=123456"。 在文本框中也可以指定value屬性值，該值將作為文本框的默認值顯示 --> <input id="user" type="text" name="username" value="yinzhengjie"/> <br /><br /> <label for="pwd">密 碼:</label> <!-- 使用input創建一個密碼框，它的type屬性值是password --> <input id = "pwd" type="password" name="passwd"/> <br /><br /> </fieldset> <fieldset> <legend>用戶愛好</legend> <!-- 單選按鈕: 使用input來創建一個單選按鈕，他的type屬性使用radio 單選項按鈕通過name屬性進行分組，name屬性相同是一組按鈕,向這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器 如果希望在單選按鈕或者多選框中指定默認選中的選項，則可以在希望中的項中添加checked="checked"屬性 --> 性別:<input type="radio" name="gender" value="male" checked="checked" id="boy"/><label for="boy">男</label> <input type="radio" name="gender" value="female" id="girl"/><label for="girl">女</label><br /><br /> <!-- 多選框: 使用input創建一個多選框，它的type屬性使用checkbox 如果希望在單選按鈕或者多選框中指定默認選中的選項，則可以在希望中的項中添加checked="checked"屬性 --> 愛好:<input type="checkbox" name="hobby" value="lol" checked="checked"/>英雄聯盟 <input type="checkbox" name="hobby" value="cf"/>穿越火線 <input type="checkbox" name="hobby" value="basketball" checked="checked"/>籃球 <input type="checkbox" name="hobby" value="movie"/>電影 <input type="checkbox" name="hobby" value="music"/>QQ音樂<br /><br /> </fieldset> <!-- 下拉列表: 使用select來創建一個下拉列表。 下拉列表的name屬性需要指定一個select，而value舒徐要指定給option。 可以通過在option中添加selected="selected"來講該選項設置為默認值 當為select添加一個 multiple="multiple"屬性，則下拉列表變為一個多選的下拉列表。 在select中可以使用optgroup標簽對選項進行分組，同一個optgroup的option是一組，可以通過label屬性來指定分組的名稱。 --> 請選擇你喜歡的明星: <select name="star" multiple="multiple"> <optgroup label="女明星"> <!--在下拉列表中使用option標簽來創建一個一個列表項--> <option value="lyf">劉亦菲</option> <option value="czh">陳紫函</option> <option value="fbb">范冰冰</option> <option value="dzq" selected="selected">鄧紫棋</option> <option value="lxr">林心如</option> </optgroup> <optgroup label="男明星"> <option value="ldh" selected="selected">劉德華</option> <option value="wbq">王寶強</option> <option value="wj">吳京</option> </optgroup> </select><br /><br /> <!-- 使用textarea創建一個文本域。 --> 自我介紹:<textarea name="info"></textarea><br /><br /> <!-- 提交按鈕可以將表單中的信息提交給服務器。使用input創建一個提交按鈕，它的type屬性是submit，在提交按鈕中可以通過value屬性來指定按鈕上的文字。 --> <input type="submit" value="注冊"/> <!-- 使用"<input type="reset" />"可以創建一個重置按鈕，點擊重置按鈕以后表單中內容將會恢復為默認值。 --> <input type="reset" /> <!-- 使用<input type="button" />可以用來創建一個單純的按鈕，這個按鈕默認沒有任何功能，只能被點擊。 --> <input type="button" value="按鈕" /> <br /><br /> <!-- 除了使用input，也可以使用button標簽來創建按鈕。這種方式和使用input類似，只不過由於它是成對出現的標簽，使用起來更加的靈活。 --> <button type="submit">提交</button> <button type="reset">重置</button> <button type=""button">按鈕</button> </form> </body> </html>
二.瀏覽器打開以上代碼渲染結果
