HTML5新增标签元素讲解

1.新增表单元素：

Input type="XXX"

Email 邮箱: 提示格式不正确

url 地址 ：地址格式：http://www.....

Number:数值型

属性：min 最小 max最大

Range: 范围内数字的输入域 滑动条 了解

Date： 日期选择器

Tel ：电话号码的输入框

Color: 选色器

2.新增表单属性：

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 值 on 打开 off 关闭。

表单提示框autofocus 属性规定在页面加载时，域自动地获得焦点。autofocus="autofocus" 页面上只有一个

formaction - 重写表单的 action 属性 重定向表单提交 控制表单数据提交时候，提交到那个页面进行数据处理

formmethod - 重写表单的 method 属性

image类型的input元素的宽度和高度

height:

width:

list: 属性规定输入域的 datalist

解释：关联选项 input-à关联成下拉列表 datalist list="val" =è datalist id="val"

Datalist 所有选项必须 option

Label 提示

Value 下拉列表中出现的值

required 属性规定必须在提交之前填写输入域（不能为空）。 必填项 可以用在所有的input 类型的元素上。

案例：

用户登录界面效果图

Css代码

@charset "utf-8";

/* CSS Document */

*{ margin:0px; padding:0px; }

ul,li{ list-style:none; }

a{ text-decoration:none; }

header{

border:0px solid #ff0000;

width:90%;

height:80px;

margin:0 auto;

font-size:50px;

background-color:#E9F8FE;

text-align:center;

line-height:80px;

}

nav{

width:90%;

height:30px;

margin:20px auto;

border:0px solid #ff0000;

background-color:#8CCFF0;

}

nav ul{ padding-left:30px; }

nav ul li{

width:80px;

float:left;

line-height:30px;

font-weight:bold;

}

nav ul li a:hover{ color:#F00; }

section{

height:600px;

width:90%;

border:1px solid #CCC;

margin:0 auto;

}

aside{

width:20%;

float:left;

height:600px;

border-right:1px solid #ccc;

}

aside ul{

border:0px solid #00ff00;

height:400px;

}

aside ul li a{

color:#000;

line-height:40px;

border-bottom:1px solid #ccc;

text-align:center;

display:block;

}

form{

width:75%;

float:left;

margin-left:10px;

padding-left:30px;

padding-top:20px;

}

form p{ line-height:30px; }

footer{

width:90%;

height:100px;

text-align:center;

margin-top:20px;

}

Html代码

无标题文档

XXX科技有限公司出品

性别

京ICP：111111111 地址：XXXXXX

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！