HTML5网页设计作业中常用的H5智能表单新属性

更新时间：2020-06-10 文章分类：网页技术课堂

学生HTML5网页设计作业中经常需要做一些表单页面，比如注册、登录、搜索等表单。html5为了方便排版，可以使form的表单标签脱离form的嵌套。HTML5新增input的form属性，用于指向特定form表单的id。HTML5智能表单如下图：

新增标签：

<input type=email … 限制用户输入email格式

<input type=url … 限制用户输入网址格式

<input type=date … 限制用户输入日期格式

<input type=time … 限制用户输入时间格式

<input type=month … 限制用户输入月份格式

<input type=week … 限制用户输入周格式

<input type=number … 限制用户输入数字格式

<input type=range … 一个滑动条效果

<input type=search … 搜索格式 results="n"

<input type=color … 选择颜色格式

新增表单属性：

required="required" 设置必填项

placeholder = "我是默认值" 设置默认值，不会提交到后台

autofocus = "autofocus" 自动聚焦

pattern="\d{3}" 自定义正则表达式

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

H5智能表单代码示例：

<form action="Test.html" method="get">
    <fieldset>
        <legend>HTML5新增表单元素</legend>
        <table>
            <tr>
                <td>邮箱</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="url" name="url"></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><input type="date" name="data"></td>
            </tr>
            <tr>
                <td>时间</td>
                <td><input type="time" name="time"></td>
            </tr>
            <tr>
                <td>月份</td>
                <td><input type="month" name="month"></td>
            </tr>
            <tr>
                <td>星期</td>
                <td><input type="week" name="week"></td>
            </tr>
            <tr>
                <td>滑动条</td>
                <td><input type="range" name="range"></td>
            </tr>
            <tr>
                <td>颜色</td>
                <td><input type="color" name="color"></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
            </tr>
        </table>
    </fieldset>
</form>

上一篇：学生下载个人网页模板后编辑网站代码的软件有哪些

下一篇：H5学生网页制作作业常应用的HTML5标签和CSS...

HTML5网页设计作业中常用的H5智能表单新属性

作品推荐

相关文章