表单

表单

​

• 初识表单post和get提交

  <form method="post" action="test01.html"> <!-- 表单提交的地址：网站或者请求处理的地址-->
      <p>
          <input type="text" name="username"/>
          <br>
          <input type="password" name="password"/>
          <input type="submit" />
          <input type="reset" />
      </p>
  </form>
  

post参数地址：

• 文本框和单选框

  <input type="text" value="初始值" maxlength="8" size="30"/>
  
  type=text:文本框
      =password：密码框
      =radio:单选按钮 value和name属性
      =email 邮箱地址输入框
      =number 数字输入框
      ....
  

• 按钮、单选框和多选框

  <p>爱好：<!-- 多选框 -->
      <input type="checkbox" value="hobby1" name="hobby" checked/>爱好1
      <input type="checkbox" value="hobby2" name="hobby" />爱好2
      <input type="checkbox" value="hobby3" name="hobby" />爱好3
  </p>
  
  <input type="button" name="btn1" value="点击"/>
  <input type="image" src="../resources/img/C7.jpg"/>
  <!--    单选框-->
      <p>性别
          <input type="radio" value="man" name="sex"> 男
          <input type="radio" value="woman" name="sex"> 女
      </p>
  

• 列表框、文本域和文件域

  <!--    下拉框-->
      <select name="列表名称">
          <option value="china" selected> 中国</option>
          <option value="us"> 美国</option>
          <option value="en"> 英国</option>
      </select>
  <!--    文本域-->
      <textarea name="content" cols="50" rows="10">文本内容</textarea>
  <!--    文件域-->
      <input type="file" name="pic"/>
  

• 搜索框、滑块和简单验证

  邮箱<input type="email" name="email"/>
  URL<input type="url" name="url"/><br>
  数字<input type="number" name="number" max="10" min="1" step="2"/><br>
  滑块<input type="range" name="range"max="100" min="0"/><br>
  搜索框<input type="serach" name="serach"/><br>
  <input type="submit" />
  

• 表单的应用

  • 隐藏域 添加 hidden 属性

  • 只读 添加 readonly属性

  • 禁用 添加 disable 属性

  • label的应用—增强表单的可用性

    <form action="test01.html" method="post">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" readonly/>
        <p hidden>123</p>
    </form>
    

• 表单的初级验证

  思考：为什么要使用表单验证？

  <form action="test01.html" method="post">
      <!--  
  	正则表达式：
  	https://www.jb51.net/tools/regexsc.htm
  	常用方式：
      palceholder 提示信息
      required  不允许为空
      pattern  正则表达式验证 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
          -->
      <label for="username">用户名</label>
      <input type="text" name="username" id="username" placeholder="请输入用户名" required
             pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"/><br>
      字母开头，允许5-16字节，允许字母数字下划线
      <input type="submit">