html 表单

一、表单标签

1. 表单基本格式

   <!--
       表单 form
   
       1.action：表单提交的位置（点击提交之后，跳转到这个位置）
                 可以是网站，也可以是一个请求处理地址
       2.method：post、get提交方式
         2.1 get： 可以在url中看到我们提交的信息，不安全
         2.2 post：比较安全，看不到我们提交的信息。
                   可以传输大文件
   -->
   
   <form action="https://www.baidu.com" method="get">
       <p>
           <input type="submit">  <!--提交-->
           <input type="reset">   <!--重置-->
       </p>
   </form>
   

2. 文本输入框

   
       <!-- 文本输入框： input type="text" -->
       <p>名字：<input type="text" name="username"></p>
   
       <!-- 密码框： input type="password" -->
       <p>密码：<input type="password" name="pwd"></p>
   
       <!--文本输入框的其他属性：
       	value="初始文本"  默认初始值
       	maxlength="8"    最长能写几个字符
       	size="30"        文本框的长度
   	    readonly         只允许读
       -->
       <p>
           <input type="text" value="初始文本" maxlength="8" size="30">
           <input type="text" name="username" value="admin" readonly>
       </p>
   

3. 单选框与多选框

       <!--
           单选框标签：
           input type="radio"
           value：单选框的值
           name：表示组。
                 如果两个选项属于同一个组，则这两个选项不可以被同时选择。
   	    disabled：禁用标签（无法选择该选项）
       -->
       <p>性别：
           <input type="radio" value="boy" name="sex"/>男
           <input type="radio" value="girl" name="sex"/>女
           <input type="radio" value="girl" name="sex" disabled/>不可选择
       </p>
   
       <!--
           多选框标签：
           input type="checkbox"
           value：多选框的值
           name：表示组。
           checked：默认选中
       -->
       <p>爱好：
           <input type="checkbox" value="eat" name="hobby"/>吃
           <input type="checkbox" value="sleep" name="hobby" checked/>睡
           <input type="checkbox" value="chat" name="hobby"/>聊天
       </p>
   

4. 按钮

       <!--
           1.普通按钮：
             input type="button"
             value：按钮上的字
           2.图片按钮：
             input type="image"
             src：图片位置
             点击图片，跳转到提交后的页面。
           3.提交按钮
             input type="submit"
           4.重置按钮
             input type="reset"
       -->
       <p>按钮：
           <input type="button" name="btn1" value="点击按钮">
           <input type="image" src="../resources/image/1.jpg">
           <input type="submit">  <!--提交-->
           <input type="reset">   <!--重置-->        
       </p>
   

5. 下拉框

       <!--下拉框
             select name="列表名称"
             option value="选项的值"
             selected：默认选中
       -->
   
       <p>下拉框：
           <select name="列表名称" >
               <option value="china">中国</option>
               <option value="us" selected>美国</option>
               <option value="uk">英国</option>
               <option value="ger">德国</option>
           </select>
       </p>
   

6. 文本域（输入大段文本）

       <!--文本域-->
       <p>输入评价：
           <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
       </p>
   

7. 文件域（选择本地文件）

       <!--文件域：点击后，会跳出本地文件管理窗口-->
       <p>
           <input type="file" name="files">
       </p>
   

8. 验证

       <!--邮件验证-->
       <p>邮箱:
           <input type="email" name="email">
       </p>
   
       <!--url验证-->
       <p>url:
           <input type="url" name="url">
       </p>
   
       <!--数字验证-->
       <p>数字:
           <input type="number" name="num" max="100" min="0" step="10">
       </p>
   

9. 滑块

       <!--滑块-->
       <p>音量：
           <input type="range" name="voice" min="0" max="100" step="2">
       </p>
   

10. 搜索框

      <p>搜索
          <input type="search" name="search">
      </p>
    

11. 点击文字，光标跳转到对应的文本框

       <p>
       		<label for="mark">点击此处，锁定mark标记的文本框</label>
      		<input type="text" id="mark">
       </p>
    

二、表单的应用

• 隐藏域 hidden：如下所示，密码框会隐藏起来，但是value值在提交后会传输过去

      <p>密码：<input type="password" name="hid" value="111" hidden></p>
  

• 只读 readonly：如下所示，该文本框默认值为admin，用户只允许读，无法进行修改

     <input type="text" name="username" value="admin" readonly>
  

• 禁用 disabled：如下所示，此选项不可选择

     <input type="radio" value="girl" name="sex" disabled/>不可选择
  

三、表单的初级验证

• placeholder：输入框的提示信息

  <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>
  

• required：提交时，该文本框不能为空（即该项为必填项）

  <p>名字：<input type="text" name="username" required></p>
  

• pattern：使用正则表达式，自定义验证表单内容（常用正则表达式，可以自行搜索）

  ​               如下所示，自定义邮箱输入框：

      <!--自定义邮箱-->
      <p>
          <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
      </p>