HTML标签-表单标签-概述、表单项

HTML标签-表单标签-概述

<!--
        form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                * action：指定提交数据的URL
                * method:指定提交方式
                    * 分类：一共7种，2种比较常用
                        get：
                            1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                            2. 请求参数大小是有限制的。
                            3. 不太安全。
                        post：
                            2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                            2. 请求参数的大小没有限制。
                            3. 较为安全。

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

<form action="#" method="post">

<!--    用户名的框子-->
  用户名：<input type="text" name="username"><br>
<!--    密码的框子-->
  密码：<input name="password"><br>

<!--    登录按钮-->
  <input type="submit" value="登录" >
</form>

 

HTML标签-表单项

 

<!--
   * 表单项标签：
        * input：可以通过type属性值，改变元素展示的样式
            * type属性：
                * text：文本输入框，默认值
                    * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
                * password：密码输入框
                * radio:单选框
                    * 注意：
                        1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                        2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        3. checked属性，可以指定默认值
                * checkbox：复选框
                    * 注意：
                        1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        2. checked属性，可以指定默认值

                * file：文件选择框
                * hidden：隐藏域，用于提交一些信息。
                * 按钮：
                    * submit：提交按钮。可以提交表单
                    * button：普通按钮
                    * image：图片提交按钮
                        * src属性指定图片的路径

           * label：指定输入项的文字描述信息
               * 注意：
                   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
        * select: 下拉列表
            * 子元素：option，指定列表项

        * textarea：文本域
            * cols：指定列数，每一行有多少个字符
            * rows：默认多少行。
-->
<!-- 如果method是get，那么登录页面展示的就是你的账号密码，如果是post，那么展示的就是#-->
<form action="#" method="get">

    <!-- 指定输入项的文字描述信息-->
    <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br><!-- 换行-->

    <!--  密码 placeholder指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息    -->
    密码：<input type="password" name="password" placeholder="请输入密码"><br><!-- 换行-->

    <!-- 单选框，，选中登录之后，会展示gender-->
    性别：<input type="radio" name="gender" value="male" >  男

     <!-- 单选框，默认女性，选中之后会展示gender-->
    <input type="radio" name="gender" value="female" checked>  女
    <br><!-- 换行-->

    <!--  checkbox复选框 选中，展示hobby-->
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街

    <!--  checkbox复选框 选中，展示hobby-->
    <input type="checkbox" name="hobby" value="java"  checked> Java

    <!--  checkbox复选框 选中，展示hobby-->
    <input type="checkbox" name="hobby" value="game"> 游戏<br><!-- 换行-->

    <!-- 从当前电脑选出一个图片-->
    图片：<input type="file" name="file"><br><!-- 换行-->

    <!--  一个隐藏的框子，登录之后，默认上传value值-->
    隐藏域：<input type="hidden" name="id" value="aaa"> <br><!-- 换行-->

    <!-- 取颜色-->
    取色器：<input type="color" name="color"><br><!-- 换行-->

   <!--  选择生日日期-->
    生日：<input type="date" name="birthday"> <br><!-- 换行-->

    <!--  精确到小时分钟的生日日期-->
    生日：<input type="datetime-local" name="birthday"> <br><!-- 换行-->

    <!-- 邮箱的框子-->
    邮箱：<input type="email" name="email"> <br><!-- 换行-->

    <!-- 包含数字的数字字段-->
    年龄：<input type="number" name="age"> <br><!-- 换行-->

    <!--  下拉框-->
    省份：<select name="province">

    <!-- 子元素：指定列表项-->
    <option value="">--请选择--</option>

    <!-- 子元素：指定列表项-->
    <option value="1">北京</option>

    <!-- 子元素：指定列表项-->
    <option value="2">上海</option>

    <!-- 子元素：指定列表项-->
    <option value="3" selected>陕西</option>

</select><br><!-- 换行-->
    自我描述：
    <!-- 文本域，列数，行数-->
    <textarea cols="20" rows="5" name="des"></textarea>

    <br><!-- 换行-->
     <!--  登录按钮-->
    <input type="submit" value="登录" >
    <!--  就一个普通的按钮-->
    <input type="button" value="一个按钮" ><br><!-- 换行-->
    <!-- 点击图片，登录-->
    <input type="image" src="img/regbtn.jpg">
</form>