新增的input type属性值:
类型**** | 使用示例**** | 含义**** |
---|---|---|
email**** | <input type="email"> | 输入邮箱格式 |
tel**** | <input type="tel"> | 输入手机号码格式 |
url**** | <input type="url"> | 输入url格式 |
number**** | <input type="number"> | 输入数字格式 |
search**** | <input type="search"> | 搜索框(体现语义化) |
range**** | <input type="range"> | 自由拖动滑块 |
time**** | <input type="time"> | 小时分钟 |
date**** | <input type="date"> | 年月日 |
datetime**** | <input type="datetime"> | 时间 |
month**** | <input type="month"> | 月年 |
week**** | <input type="week"> | 星期 年 |
常用新属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder**** | <input type="text" placeholder="请输入用户名"> | 占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回 |
autofocus**** | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple**** | <input type="file" multiple> | 多文件上传 |
autocomplete**** | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
required**** | <input type="text" required> | 必填项 内容不能为空 |
accesskey**** | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5新特性</title>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>学生档案思密达</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<!-- h5新增的根据输入值匹配下拉框的值的新元素 list属性匹配datalist的id值 -->
<input type="text" list="xueyuan">
<datalist id="xueyuan">
<option>java学院</option>
<option>前端学院</option>
<option>php学院</option>
<option>设计学院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
</body>
</html>
进度条和度量器:
进度条参考progress标签
度量器参考meter标签