整理一下学习新的知识点
邮箱 type=“email”
数字:type=“number”min最小值 max最大值 step 每次递增数目
颜色:type=“color”了解即可
范围区域:type=“range”
网址:type=“url”
搜索框:type=“search”可以做到局部清除
选择年月日:date type=“date”
年月:month type=“month”
年周:week type=“week”
时间:time type=“time”
年月日+时间:datetime-local type=“datetime-local”
datetime 不常用
表格新增的属性
placeholder 提示信息
required验证不能为空
maxlength最大长度
autofocus进入界面时自动获取焦点
autocomplete与name属性链接用
下面为练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
width: 580px;
height: 740px;
border: 2px solid #c4c8c8;
}
h4 {
margin-left: 30px;
}
legend {
padding: 6px 40px 8px 40px;
border: 2px solid #c6caca;
font-size: 14px;
margin-left: 20px;
}
.yongh {
margin-left: 100px;
}
.mima {
margin-left: 100px;
}
.yong {
margin-left: 80px;
margin-bottom: 10px;
}
.mima {
margin-left: 80px;
margin-bottom: 10px;
}
.jiz {
margin-left: 60px;
float: left;
}
.jiz input {
width: 16px;
height: 16px;
}
.denglu {
/* float: left; */
margin-left: 15px;
}
.denglu input {
width: 100px;
height: 30px;
background-color: #d0f0fd;
}
a {
text-decoration: none;
}
.wangji {
margin-top: 10px;
}
.tong {
margin-left: 50px;
margin-top: 20px;
}
.tong input {
width: 16px;
height: 16px;
margin-left: 18px;
}
.tong a {
color: #5f8799;
margin-left: 10px;
}
.sub {
text-align: center;
}
.sub input {
width: 100px;
height: 30px;
margin-top: 10px;
margin-left: 5px;
background-color: #d0f0fd;
}
.mo{
color: #4f757b;
font-size: 15px;
font-weight: bold;
}
.nin{
margin-left: 10px;
color: #4f757b;
font-size: 15px;
font-weight: bold;
}
.nin span{
font-weight: normal;
}
.two{
width: 500px;
margin: 0 auto;
border: 3px solid #c4c8c8;
}
.two1{
width: 500px;
margin: 0 auto;
border: 3px solid #c4c8c8;
}
legend{
color: #437e7e;
font-weight: bold;
}
</style>
</head>
<body>
<div class="one">
<h4>已注册用户登录</h4>
<fieldset class="two">
<legend>用户登录</legend>
<div class="yong">
用户名 <input type="text">
</div>
<div class="mima">
密码  <input type="password">
</div>
<div class="jiz">
<input type="checkbox"><u>记住我</u>
</div>
<div class="denglu">
<input type="submit" value="登陆" class="denglu">
</div>
<div class="wangji">
<a href="">您忘记密码?</a>
</div>
</fieldset>
<h4>未注册创建账户</h4>
<fieldset class="two1">
<legend>用户注册</legend>
<p class="nin">您的电子邮箱不会被公布出去,但是必须填写。<span>在您注册之前请认真阅读服务条款</span></p>
<div class="yong">
用户名  <input type="text">*(最多30个字符)
</div>
<div class="mima">
电子邮箱 <input type="email">*
</div>
<div class="mima">
密码   <input type="password">*(最多15个字符)
</div>
<div class="mima">
重复密码 <input type="password">*
</div>
<div class="tong">
同意服务条款<input type="checkbox"><a href="">先看看条款?</a>*
</div>
<div class="sub">
<input type="submit">
<input type="reset">
</div>
<p class="mo">
*在提交您的注册信息时,我们认为您已经同意了我们的服务条款。<br>
<span>
*这些条款可能在未经您同意的时候进行修稿。
</span>
</p>
</fieldset>
</div>
</body>
</html>