h5新特性总结&表单实现

最新推荐文章于 2024-05-10 18:00:00 发布

都说没想好

最新推荐文章于 2024-05-10 18:00:00 发布

阅读量4.7k

点赞数 2

分类专栏： web前端（慕课网教程操作+笔记）

本文链接：https://blog.csdn.net/u013045370/article/details/82454608

版权

web前端（慕课网教程操作+笔记）专栏收录该内容

35 篇文章 0 订阅

订阅专栏

今天开始学h5和css3的新特性，边学边持续更新。

1.语义化标签：

header，nav，main，article，aside，footer

（1）IE9可能支持h5，但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出 <main>，需要给它转换为块级元素：

display:block;

（2）IE8以及IE8以下不支持h5：不认识语义标签，完全无效；解决方法：

a.手动创建标签：document.createElement("header");所创建的标签都是行级元素，需要在样式里加display:block;

b.引入第三方插件：html5.shiv.min.js，引入后可以做到兼容：

<!-- html5shiv.js和respond.js IE8支持HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

补充一个：之前学vue的时候，如果不用vue-cli，链接vue的是<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（3）IE10全部支持。

2.表单标签

.新增type属性，之前的是text，password，新增有email，tel，url，number，search，range，color，time，date，datetime-local，month，week

email提供验证，包含@+域名；

tel没有验证，在移动端可以打开数字键盘；

url验证，必须包含http：//

number，只能输入数字（可小数），有上调下降箭头调整，可以设置max，min，value默认值

<input type="number" value="60" max="100" min="0">

search，提供人性化体验，最后有个x全部删除

range，设置范围max，min拉动条

color，颜色选取

time，点击选取--：--

date，箭头下拉有日历控件选择年/月/日

datetime，大多数浏览器不支持，只有safari支持。

datetime-local：浏览器支持

month，week，生成月，周

3.表单其他属性

placeholder：提示文本，提示占位，“请输入xxx”

autofocus：自动获取焦点，不用鼠标去点

autocomplete：自动补全，但是有两个前提：

（1）必须成功提交过

（2）加autocomplete的这个元素必须有name属性

用户名：<input type="text" name="usrname" placeholder="请输入用户名" autofocus autocomplete="on">

required：必须输入

pattern：正则表达式验证，

回顾：

*：任意个

？：0个或1个

+：1个或多个

手机号码：pattern=“^(\+86)?1\d{10}$”

手机：<input type="tel" required pattern=“^(\+86)?1\d{10}$”>

multiple：

(a) type为file：上传文件，加multiple可以上传多个文件

(b) type为email：多邮箱之间用逗号分割，加multiple可实现

form:指定表单id，不在表单内，但是提交也可以随着该表单的提交一起提交。

4.表单新增元素

（1）实现可输入，可选择：datalist，但是不同浏览器支持不一样，应该少使用

（2）实现一个表单

其中用到定位绑定用for。

<!DOCTYPE html>
<html lang="">
<head>
<title>myhtml</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<form>
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入学生姓名">

<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">

<label for="useremail">邮箱地址:</label>
<input type="email" name="useremail" id="useremail" required>

<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option value="前端学院"></option>
<option value="后端学院"></option>
<option value="C++学院"></option>
</datalist>

<label for="score">入学成绩:</label>
<input type="number" name="score" id="score" max="100" min="0" value="0">

<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>

<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期:</label>
<input type="date" id="LeaveTime" name="LeaveTime">

<input type="submit" id="submit">
</fieldset>

</form>
<script>
document.getElementById("score").οninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>

css样式：

*{
margin:0;
padding: 0;
}
form{
width:600px;
margin:20px auto;
}
form > fieldset{
padding: 10px;
}
form > fieldset > meter,
form > fieldset > input {
width:100%;
height: 40px;
line-height: 40px;
margin:10px 0;
border:none;
border:1px solid #CCC;
border-radius: 4px;
padding-left: 5px;
font-size: 16px;
/*width=内容+padding+border*/
box-sizing: border-box;
}
form > fieldset > meter{
padding-left: 0;
}

#submit{
background-color: red
}

最后效果：

都说没想好

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
h5新特性总结&表单实现

今天开始学h5和css3的新特性，边学边持续更新。1.语义化标签：header，nav，main，article，aside，footer（1）IE9可能支持h5，但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出 &lt;main&gt;，需要给它转换为块级元素：display:block;（2）IE8以及IE8以下不支持h5：不认识语义标签，完全无效；...
复制链接

扫一扫