創建表單

表單

    <form action="" method="post">
    <p>用戶名：<input name="user" id="name" type="text" size="15" /></p>
    <p>密碼：  <input name="password" type="password" size="15" /></p>
    <p>性別： 男 <input type="radio" name="sex" value="1"  checked />
            女 <input type="radio" name="sex" value="2"  /></p>
    <p>愛好：<input name="fav1" type="checkbox" value="1"/>跳舞
            <input name="fav1" type="checkbox" value="2"/>散步    
            <input name="fav1" type="checkbox" value="3"/>唱歌</p>
    <p>所在地：<select name="addr">
                <option value="1">河北</option>
                <option value="2">北京</option>
                <option value="3">天津</option>
            </select></p>
    <p>個性簽名：<br/><textarea name="sign"></textarea></p>
    <p><input type="submit" name="submit" value="提交"/></p>
    </form>
 

表單三要素

• form標記
• 至少一個輸入域（如input文本域或選擇框）

• 提交按鈕

  input標記type屬性取值含義

• text 文本框 value=“請輸入關鍵字”也可以為空
• password 密碼框
• radio 單選框 checked默認選擇
• checkbox 復選框
• file 文件域
• hidden 隱藏域 隱藏域不會顯示在網頁中，但是提交表單時會一起提交到服務器（必須有name屬性和value屬性）
• submit 提交按鈕
• reset 重置按鈕
• button 普通按鈕

• image 圖像按鈕

  表單的輔助標記

• label標記 定義標簽，通過for屬性綁定控件，如果表單控件的id屬性和label標記的for屬性相同，那麽label標記就會和表單控件關聯起來。

• 字段集標記fieldset、legend

  HTML5新增的表單標記和屬性

• input屬性新增類型值

  網址輸入框   <input type="url">
  email輸入框   <input type="email">
  數字輸入框   <input type="number">
  日期輸入框   <input type="date">
  搜索輸入框   <input type="search">
  範圍滑動條   <input type="range">

• input標記新增的公共屬性

  autofocus   <input autofocus="true">   設置元素自動獲得焦點
  pattern     <input pattern="正則表達式">   使用正則表達式驗證，例如：pattern="^[a-zA-Z\w(5,7)$]"
  placeholder   <input placeholder="默認內容">  設置文本框裏的默認內容
  required   <input required="true">   是否檢測文本框輸入框的內容為空
  novalidate  <input novalidate="true">  是否驗證文本輸入框的內容
  autocomplete  <input autocomplete="on">  使form或input具有自動完成功能
   
  

創建表單