HTML标签：表单标签

文章目录

表单概念：

  • 用于采集用户输入的数据的。用于和服务器进行交互

  • 使用的标签<form></form>

    • form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

      • 属性：

        • action：指定提交数据的URL

        • method：指定提交方式

          • 分类：一共7种，2种比较常用

            • get：

              1. 请求参数会在地址中显示。会封装到请求行中（HTTP协议后讲解）

              2. 请求参数长度有限制

              3. 不太安全

            • post：

              1. 请求参数不会在地址中显示，会封装在请求体中（HTTP协议后讲解）

              2. 请求参数大小没有限制

              3. 较为安全

      • 表单项中的数据要想被提交，必须指定其name属性

表单项标签

  • input：可以通过type属性值，改变元素展示的样式
    • type属性：
      • text：文本输入框，默认值
        • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
      • password：密码输入框，密文显示
      • radio：单选框
        1. 注意：要想让多个单选框实现单选的效果，则多个单选框的name属性值必须是一样的
        2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
        3. checked属性，可以指定默认值
      • checkbox：复选框
        • 注意：
          1. 一般会给每一个单选框提供value属性，指定其被选中之后提交的值
          2. checked属性，可以指定默认的值
      • label：指定输入项的文字描述信息
        • 注意：
          • label的for属性一般会和input的id属性值对应。如果设置了对应，则点击label区域，会让input输入框获取焦点。
      • file：文件选择框
      • hidden：隐藏域，用于提交一些信息
      • 按钮：
        • submit：提交按钮，提交表单
        • button：普通按钮
        • image：图片按钮，可以点击后提交表单
          • src属性指定图片的路径
        • date
        • datetime-local
        • email
        • …
  • select：下拉列表
    • 子元素：option，指定列表项
  • textarea：文本域
    • cols：指定列数，每一行有多少个字符
    • rows：默认多少行

简单注册表案例

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="#" method="post">
    <table border="1" align="center" width="500">
      <tr>
        <td>
          <label for="username">用户名</label>
        </td>
          <td>
              <input id="username" placeholder="请输入用户名" name="username" >
          </td>
      </tr>

        <tr>
            <td>
                <label for="password">密码</label>
            </td>
            <td><input name="password" id="password" type="password" placeholder="请输入密码"></td>
        </tr>

        <tr>
            <td><label for="email">邮箱</label> </td>
            <td><input id="email" name="email" type="email" placeholder="请输入邮箱"></td>
        </tr>

        <tr>
            <td><label for="name" id="nametxt">姓名</label></td>
            <td><input id="name" name="name" placeholder="请输入姓名"></td>
        </tr>
        <tr>
            <td><label for="phoneNumber" id="phoneNumbertxt">手机号码</label> </td>
            <td><input type="number" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号码"></td>
        </tr>

        <tr>
            <td>性别</td>
            <td><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</td>
        </tr>

        <tr>
            <td><label for="birthday" name="birthdaytxt">生日日期</label> </td>
            <td><input id="birthday" name="birthday" type="date"></td>
        </tr>

        <tr>
            <td>验证码</td>
            <td><input name="yanzhangma"><img src="image/lvugkl.jpg" width="50"></td>
        </tr>

        <tr>
            <td width="100%" colspan="2">
                <table align="center">
                    <tr>
                        <td align="center" width="100%">
                            <input type="submit" value="确认">
                            <input type="button" value="取消">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>


</form>
</body>
</html>