<!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>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com
">