html常用标签6-表单标签

1、表单的初始化标签

　　

<form action="#" method="get"><!--表单的开始-->
        
</form>

　　属性：

　　　　action:提交表单的跳转地址，可以是后台方法，也可以是前台页面

　　　　method:表单的提交方式：post;get

　　　　name:表单名称

2、表单中的提示语包裹元素

 <!--点击提示语，对应的输入框自动获取焦点-->
        <!--方法一-->
        <label for="username">用户名</label>
        <input type="text" name="name" id="username">
        <!--方法二-->
        <label>用户名<input type="password" name="word" id="password"></label>

3表单的分组标签

  <form action="#" method="get"><!--表单的开始-->
        <fieldset>
            <legend>用户注册信息</legend>
            <!--点击提示语，对应的输入框自动获取焦点-->
            <!--方法一-->
            <label for="username">用户名</label>
            <input type="text" name="name" id="username">
            <!--方法二-->
            <label>用户名<input type="password" name="word" id="password"></label>
        </fieldset>
        <fieldset>
            <legend>个人详细资料</legend>
            <label>年龄<input type="text" name="" id=""></label>
        </fieldset>
        
    </form>

4、表单中的input属性

1>html4相关的input

 <fieldset>
            <legend>h4的相关input标签type值</legend>
            <!--文本输入框-->
            <input type="text" name="" id="">
            <!--密码输入框-->
            <input type="password" name="" id="">
            <!--文件选择框-->
            <input type="file" name="" id="">
            <!--多选框-->
            <input type="checkbox" name="hh" id="">
            <input type="checkbox" name="hh" id="">
            <!--单选框-->
            <input type="radio" name="aa" id="">
            <input type="radio" name="aa" id="">
            <!--按钮-->
            <input type="button" value="按钮">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <!--隐藏框（只是单纯的用于传值到后台）-->
            <input type="hidden" name="" value="传入后台的值">
            <!--图片框(也是具有提交的效果)-->
            <input type="image" src="../imgs/happy.gif" alt="">
        </fieldset>

2>html5新增的input标签

        <fieldset>
            <legend>html5的新增input标签，一般用于移动端</legend>
            <!--邮箱-->
            <input type="email" name="" id="">
            <!--电话-->
            <input type="tel" name="" id="">
            <!--ip地址-->
            <input type="url" name="" id="">
            <!--搜索-->
            <input type="search" name="" id="">
            <!--区域范围-->
            <input type="range" name="" id="">
            <!--颜色-->
            <input type="color" name="" id="">
            <!--数字-->
            <input type="number" name="" id="">
            <!--有关时间的-->
            <!--时分-->
            <input type="time" name="" id="">
            <!--年月日-->
            <input type="date" name="" id="">
            <!--年月-->
            <input type="month" name="" id="">
            <!--年星期-->
            <input type="week" name="" id="">
            <!--当地时间-->
            <input type="datetime-local" name="" id="">
        </fieldset>

5、h5新增的其他属性

　　1>placeholder:在文本框中显示，填写信息时消失(属性名=属性值时可以只写属性名)

　　　　

 　　　　　　<input type="text" name="" id="" placeholder="哈哈哈哈哈">
            <!--这个属性对于file的input标签不起作用-->
            <input type="file" name="" id="" placeholder="hhhhh">

　　2>autofofus或者autofocus="autofucos"：自动获取焦点

            <!--自动获取焦点-->
            <input type="text" name="" id="" autofocus>                

　　3>multiple：多文件上传

             <!--多文件上传-->
            <input type="file" name="" id="" multiple>            

　　4>autocomplete="on":自动填充

 　　　　　　　　<!--自动填充-->
            <input type="datepickers" name="" id="" autocomplete="on">
            <input type="text" name="" id="" autocomplete="off">

　　5>required:必填项

　　

　　　　　　　　<!--必填项-->
            <input type="email" name="" id="" required>

　　6>accesskey:快捷键让元素获得焦点alt+s

 <!--让快捷键alt+s快速让元素获得焦点-->
            <input type="text" name="" id="" accesskey="s">