HTML标签表单标签概述和表单项input

HTML标签表单标签_概述

表单：

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

　　form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
　　　　属性：
　　　　　　action：指定调教数据的url方式
　　　　　　mehtod：指定提交方式
　　　　　　　　分类：一共7种，2种比较常用
　　　　　　　　　　get：
　　　　　　　　　　　　1、请求参数会在地址栏中显示　　　　
　　　　　　　　　　　　2、请求参数大小是有限制的
　　　　　　　　　　　　3、不太安全
　　　　　　　　　　post：
　　　　　　　　　　　　1、请求参数不会再地址栏中显示，会封装在请求体中
　　　　　　　　　　　　2、请求参数的大小没有限制
　　　　　　　　　　　　3、较为安全
　　　　表单项中的数据要想被提交，必须指定其name属性

    <form action="#" method="get">
        用户名：<input name="username"><br>
        密码：<input name="password"><br>
        <input type="submit" value="登录">
    </form>

HTML标签表单标签_表单项input

表单项标签：

　　input：可以通过type属性值，改变元素展示的样式

　　　　type属性：

　　　　　　text：文本输入框　默认值　　

　　　　　　　　placeholder：指定输入框的提示信息，当输入框的内容发生变化时，会自动清空提示信息

　　　　　　password：密码输入框

　　　　　　radio：单选框

　　　　　　　　注意：

　　　　　　　　　　1、要想让单选框实现单选的效果，则多个单选框的name属性值必须一样

　　　　　　　　　　2、一般会给每个单选框提供value属性，指定其被选中后提交的值

　　　　　　　　　　3、checked属性可以指定默认值

　　　　　　checkbox：复选框

　　　　　　　　　　注意：

　　　　　　　　　　1、要想让复选框实现多选的效果，则多个单选框的name属性值必须一样

　　　　　　　　　　2、一般会给每个单选框提供value属性，指定其被选中后提交的值

　　　　　　　　　　3、checked属性可以指定默认值

　　　　　　file：文件选择框

　　　　　　hidden：隐藏域，用来提交一些信息

　　　　　　按钮：

　　　　　　　　1、submit：提交按钮

　　　　　　　　2、button：普通按钮

　　　　　　　　3、image：图片提交按钮

　　　　　　　　　　src属性指定图片的路径

　　　　label：指定输入项的文字描述信息

　　　　　　注意：

　　　　　　　　label的for属性一般会和input的id属性值对应，如果对应了则点击label区域，会让input输入框获取焦点

    <form action="#" method="get">
        <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
        密码：<input type="password" name="password" placeholder="请输入密码"><br>
        性别：<input type="radio" name="gender" value="male" checked="checked"> 男
        <input type="radio" name="gender" value="female"> 女
        <br>
        爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"> JAVA
        <input type="checkbox" name="hobby" value="game" checked="checked"> 游戏
        <br>
        图片：<input type="file"><br>
        隐藏域：<input type="hidden" value="aaa"> <br>
        取色器：<input type="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>
        <br>
        <input type="submit" value="登录">
        <input type="button" value="一个按钮"><br>
        <input type="image" src="img/regbtn.jpg">
    </form>