<!DOCTYPEhtml>

<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width,initial-scale=1.0″>
<title>表单</title>
<style>
fieldset{
border:rgb(216,159,2)1pxsolid;
padding:15px15px;
width:50%;
margin:0auto;
margin-bottom:30px;
}
legend{
padding:5px;
background-color:tomato;
color:white;
}
fieldsetdiv{
margin-bottom:10px;
}
textarea{
width:300px;
}
.btn{
width:50%;
margin:20pxauto;
text-align:center;
}
button{
width:150px;
height:35px;
line-height:35px;
color:white;
background-color:tomato;
border:none;
cursor:pointer;
}
button:hover{
background-color:teal;
}
</style>
</head>
<body>
<formmethod=”POST”action=””>
<div>
<fieldset>
<legend>基本信息</legend>
<div>
<labelfor=”username”>帐号:</label>
<inputname=”username”id=”username”type=”text”placeholder=”6-12位字符”requiredautofocus>
</div>
<div>
<labelfor=”email”>邮箱:</label>
<inputname=”email”id=”email”type=”email”placeholder=”demo@demo.com”required>
</div>
<div>
<labelfor=”pwd1″>密码:</label>
<inputname=”pwd1″id=”pwd1″type=”password”placeholder=”不少于6位且必须子母加数字”required>
</div>
<div>
<labelfor=”pwd2″>确认密码:</label>
<inputname=”pwd2″id=”pwd2″type=”password”required>
</div>
</fieldset>
<fieldset>
<legend>扩展信息</legend>
<div>
<label>生日:
<inputname=”birthda”type=”date”required></label>
<!–label中不写for，可以将表单元素放在label中，也可实现点击Label文字，表单获取焦点–>
</div>
<div>
<labelfor=”secret”>性别:</label>
<inputtype=”checkbox”name=”gender”id=”male”value=”male”>
<labelfor=”male”>男</label>
<inputtype=”radio”name=”gender”id=”female”value=”female”>
<labelfor=”female”>女</label>
<inputtype=”radio”name=”gender”id=”secret”value=”secret”>
<labelfor=”secret”>保密</label>
</div>
<div>
<labelfor=”game”>爱好:</label>
<inputtype=”checkbox”name=”hobby[]”id=”sleep”value=”sleep”>
<labelfor=”sleep”>睡觉</label>
<inputtype=”checkbox”name=”hobby[]”id=”book”value=”book”>
<labelfor=”book”>看书</label>
<inputtype=”checkbox”name=”hobby[]”id=”game”value=”game”checked>
<labelfor=”game”>游戏</label>
</div>
<!–选项列表–>
<div>
<labelfor=”brand”>手机品牌:</label>
<inputtype=”search”list=”phone”id=”brand”name=”brand”>
<!–上面的id和name不可与list的值一致–>
<datalistid=”phone”>
<!–id要和上面的List绑定，是一致的–>
<optionvalue=”mi”label=”小米”></option>
<optionvalue=”apple”label=”苹果”></option>
<optionvalue=”huawei”label=”华为”></option>
</datalist>
</div>
</fieldset>
<fieldset>
<legend>其它信息</legend>
<div><labelfor=”pic”>上传头像:</label><inputtype=”file”name=”pic”id=”pic”
accept=”image/jpg,image/png,image/gif”></div>
<div><labelfor=”resume”>简历:</label><textareaname=”resume”rows=”5″placeholder=”不超过100字”
id=”resume”></textarea></div>
</fieldset>
<!–隐藏域–>
<inputtype=”hidden”name=”userid”id=”userid”value=”111″>
<divclass=”btn”><button>提交</button></div>
</form>
</body>
</html>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。