HTML—-表单标签

##  HTML标签:表单标签

  *  表单:

    *  概念:用于采集用户输入的数据的。用于和服务器进行交互。

    *  使用的标签:form标签

      * 属性:

         * action:指定数据提交的URL

         * method:指定提交方式

        * 分类:一共7种
       get:
              1、请求参数会在地址栏中显示。
              2、请求参数长度是有限制的。
              3、get请求不太安全

      post:
              1、请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议中详解)
              2、请求参数的大小没有限制
              3、post请求安全

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

  * 表单项标签:
    * input:可以通过type属性,改变元素展示样式
      * type属性:
        * text:文本输入框
          * placeholder:指定输入框的提示信息,当时输入框的内容发生变化,他就会清空提示信息
        * password:密码输入框
        * radio:单选框(1、如果要想实现单选那么name属性必须唯一。2、一般会给每一个单选框提供value属性,指定其被选中后提交的值.3、checked属性可以指定默认值)
        * checkbox:复选框
1、一般会给每一个 单选框提供value属性,指定其被选中后提交的值.2、checked属性可以指定默认值
        * flie:文件选择框
        * hidden:隐藏域,用于提交一些隐藏信息
        *按钮:
          * submit:提交按钮
          * button:按钮
          * images:图片提交按钮
            * src:指定图片路径

      *label:指定输入项的文字信息
        * 注意:label的for属性一般会和input的id属性对应,如果对应了,则点击label区域会让input输入框获取焦点。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围 * 属性: * action:指定数据提交的URL * method:指定提交方式 * 分类:一共7种 get: post: * 表单项中的数据要想被提交:必须指定其name属性--><form action="#"> <label for="username">用户名:</label><input id="username" name="username" placeholder="请输入密码"><br> 密码:<input name="password" placeholder="请输入密码"><br> 性别:<input type="radio" name="sex"><input type="radio" name="sex">女 爱好:<input type="checkbox" name="hobby" value="gj"> 逛街 <input type="checkbox" name="hobby" value="yy"> 游泳 <input type="checkbox" name="hobby" value="xx"> 学习<br> 图片:<input type="file"><br> 隐藏域:<input type="hidden" name="id" value="aaa"> <input type="submit" value="登录"><br> <input type="image" src="../练习/images/icon_1.jpg"><br> 拾色器:<input type="color" name="color"><br> 日期:<input type="datetime-local" name="date1"><br> 日期:<input type="date" name="date2"><br> 邮箱:<input type="email" name="email"><br> 年龄:<input type="number" name="age"><br></form></body></html>
    * select:下拉列表
      * 子元素:option,指定列表项
    * textarea:文本域
      * cols:指定列数,每一行有多少个字符。
      * rows:默认多少行。
案例:
<!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 type="text" id="username" placeholder="请输入账号"></td> </tr> <tr> <td><label for="password">密码:</label></td> <td><input type="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td><label for="email">Email:</label></td> <td><input type="email" id="email" placeholder="请输入Email"></td> </tr> <tr> <td><label for="realname">姓名:</label></td> <td><input type="text" id="realname" placeholder="请输入真实姓名"></td> </tr> <tr> <td><label for="tel">手机号:</label></td> <td><input type="text" id="tel" placeholder="请输入您的手机号"></td> </tr> <tr> <td><label>性别:</label></td> <td><input type="radio" name="sex" value="1"><input type="radio" name="sex" value="2"></td> </tr> <tr> <td><label>出生日期:</label></td> <td><input type="date" name="date"></td> </tr> <tr> <td><label>验证码:</label></td> <td><input type="text" name="yzm"><img src="images/logo.jpg"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册"></td> </tr> </table></form></body></html>

效果:

 

 

 

相关文章