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

发布时间:2020-06-10   文章分类:网页技术课堂

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

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>

STU网页公众号

STU网页设计(LILIXING.COM)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计作品定制,网页毕业设计制作,学生网页成品免费下载...