form的簡介

表單是可以搜集不同類型的用戶輸入，并通過瀏覽器將這些數據傳送到服務器端，實現網站與用戶之間的信息交互。

form的屬性

• action：指定表單數據提交到哪個地址進行處理
• method：指明提交表單的HTTP方法，取值為get或post
• target：在何處打開action，與<a>標簽的target屬性用法類似。
• enctype（編碼方式）：

1. application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
2. text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼
3. multipart/form-data：使用包含文件上傳控件的表單時，必須使用該值

eg.<form action="xxxx" method="post/get">.....</form>

常用標簽

eg.

<form  method="post" action="save.php">
  <div class="username">
    <label> 賬戶: </label>
    <input type="text" name="myname" >
  </div>
  <div class="password">
    <label> 密碼: </label>
    <input type="password" name="pass">
  </div> 
  <div>
    <input class="submit" type="submit"  value="提交">
    <input class="reset" type="reset"  value="重置">
  </div>
  <div class="sex">
    <label> 性別: </label>
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
  </div>
  <div class="hobby">
    <label> 愛好: </label>
    <input type="checkbox" name="hobby" value="read">讀書
    <input type="checkbox" name="hobby" value="run">跑步
    <input type="checkbox" name="hobby" value="sing">唱歌
    <input type="checkbox" name="hobby" value="dance">跳舞
  </div>
  <div class="file">
    <label> 設置頭像: </label>
    <input type="file" name="myfile" accept="image/png">
    <!--accept屬性限制上傳文件的類型-->
  </div>
</form> 

顯示效果：

input.png

• textarea標簽：多行文本輸入

<div class="textarea">
    <textarea name="article" rows="10" cols="40">在這里輸入內容...
    </textarea>
    <!--cols：多行輸入域的列數；rows：多行輸入域的行數-->
</div>

顯示效果：

textarea.png

• select標簽：下拉菜單

<div class="select">
  職業：
   <select>
      <option value="老師">老師</option>
      <option value="醫生">醫生</option>
      <option value="律師">律師</option>
      <option value="學生">學生</option>
      <option value="程序猿" selected>程序猿</option>
      <!--selected屬性表示默認初始值-->
   </select>
</div>

顯示效果：

select.png

• label標簽&placeholder屬性：

 <div class="username"> 
    <label for="username">姓名：</label> 
    <input id="username" type="text" name="username" value=""> 
    <!--label標簽的 for 屬性中的值一定要與相關控件的 id 屬性值相同-->
 </div>
 <div class="password">
   <label for="password">密碼：</label>
   <input id="password" type="password" name="password" placeholder="請輸入密碼...">
  </div>

顯示效果：

label&placeholder.png

說明：

1. 如果在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
   ==大白話：點擊“密碼”或輸入框均可輸入密碼==
2. placeholder是提示文字，當用戶在文本框里輸入了什么信息，提示信息就會隱藏