教你快速学会H5

H5是什么

HTML5是一项标准，并不是一项技术

H5表单属性

1. placeholder:占位符（提供可描述输入字段预期值得提示信息）
2. autofocus: 页面加载后此位置自动获取焦点
3. multiple:允许输入多个值（一般用于type=file 选择多个文件）
4. form:用于把表单元素放置在表单外部
5. required:必填
6. maxlength:字符串最大长度
7. minlength:字符串最小长
8. min:允许输入的最小字段(可以为number或是data)
9. max:允许输入得最大字段(可以为number或是data)
10. pattern:指定输入内容符合正则表达式

在这里插入代码片
   <form action="" id="myForm">
        用户名：<input type="text" name="qwe" placeholder="请输入用户名" autofocus autocomplete="on">
        <!-- placeholder:提示文本，提示占位符 -->
        <!-- autofocus:自动获取焦点 -->
        <!-- autocomplete="on/off"  自动完成 
            注意：1.必须是成功提交的，提交过后才会有记录
                  2.必须有name属性的配合
        -->
        手机号：<input type="tel" name="userPhone" pattern="^(\+86)?1\d{10}$" required>
        <!-- tel并不会实现验证，而是在移动端能够弹出数字键盘
            pattern:正则表达式验证
            required必须输入 如果没有输入则会阻止当前数据提交
        -->
        文件：<input type="file" name="userfile" multiple>
        <!-- multiple 多选 -->
        邮箱：<input type="email" name="useremail" multiple>

        确认密码：<input type="text" minlength=6 maxlength=12>
        <input type="submit">
    </form>


    地址：<input type="text" name="address" form="myForm">
    <!-- form:指定表单id，可以将表单元素与表单进行关联 -->

1. color:定义得拾色器
2. date:定义日期（带有calendar控件）
3. datetime:定义日期（带有calendar和time控件）
4. datetime-local:定义日期（带有calendar和time控件）
5. month:定义日期月（带有calendar控件）
6. week:定义日期周（带有calenda控件）
7. time:定义日期 时分秒（带有time控件）
8. email:e-mail地址
9. number:带有spinner控件的数字字段
10. range:带有slider控制的数字字段

在这里插入代码片
   <form action="">
        用户名：<input type="text" name="userName" id="userName"><br>
        电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}"><br>
        <span class="span"></span>
        <!-- <input type="submit"> -->
        <button class="btn">提交</button>