<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
margin:8px;
}
input:invalid{
/*border:2px solid red;*/
background-color: yellow;
}
</style>
</head>
<body>
<h3>新生注册</h3>
<!-- 第二代标签的核心就是表单标签，表单标签的核心是input输入标签 -->
<!-- input输入标签的type属性的值有很多，特别是h5,又增加不少 -->
<!-- 为了迎合各种type需求，input标签也多了不少属性，但有些属性只能在特定的type下才能使用。 -->
<form action="process.html" method="post">
<input type="hidden" name="securitycode" value="abc9380ckdk">
<div>
<!-- label是一个input输入控件的提示文字，注意设置 for = input id -->
<label for="stuno">学生学号:</label>
<input type="text" name="stuno" id="stuno">
</div>
<div>
<label for="stuname">学生姓名:</label>
<input type="text" name="stuname" id="stuname" placeholder="请输入真实姓名">
</div>
<div>
<label for="stumail">催款邮箱:</label>
<!-- html5提供了大量的type类型，并自带了检测机制，大大方便了程序员，减少了代码开发量 -->
<input type="email" name="stumail" id="stumail" placeholder="请输入真实电邮">
</div>
<div>
<label for="stupwd">预设密码:</label>
<input type="password" name="stupwd" id="stupwd"
placeholder="请输入6位数字密码" maxlength="6" size="15" value="888888" readonly>
</div>
<div>
<label>学生性别:</label>
<!-- 多个单选部件如果想形成互斥效果，必须name一样，形成一个控件组 -->
<input type="radio" name="stusex" id="male" value="m"><label for="male">男</label>
<input type="radio" name="stusex" id="female" value="f" checked><label for="female">女</label>
<input type="radio" name="stusex" id="secret" value="s"><label for="secret">保密</label>
</div>
<div>
<label>学生爱好:</label>
<input type="checkbox" name="stubohhy" id="cm" value="cm"><label for="cm">爬山</label>
<input type="checkbox" name="stubohhy" value="sw" checked>游泳
<input type="checkbox" name="stubohhy" value="rd">阅读
<input type="checkbox" name="stubohhy" value="rn" checked>跑步
</div>
<div>
<span>最爱颜色:</span>
<input type="color" name="favouritecolor">
</div>
<div>
<label>出生日期:</label>
<input type="date" name="birthday">
</div>
<div>
<label for="stuphoto">学生照片:</label>
<input type="file" name="stuphoto" id="stuphoto">
</div>
<div>
<label for="stuorigin">学生籍贯:</label>
<select name="stuorigin" id="stuorigin">
<option value="">=请选择=</option>
<option value="fz">福州</option>
<option value="xm" selected>厦门</option>
<option value="qz">泉州</option>
<option value="pt">莆田</option>
</select>
</div>
<div>
<label>喜欢的NBA球队:</label>
<select name="NBAGroups" size="4" multiple>
<option value="bull1">公牛1</option>
<option value="bull2">公牛2</option>
<option value="bull3">公牛3</option>
<option value="bull4">公牛4</option>
</select>
</div>
<div>
<label>备注说明:</label>
<textarea name="stumemo" rows="10" cols="50" placeholder="这个很懒，什么都没留下!">dfajdlfajdlfa</textarea>
</div>
<div>
<input type="submit" value="登记">
<input type="reset" value="重置">
</div>
</form>
</body>
</html>
知识点
- label用法
- span的用法
- label for 的用法
- placeholder的用法
- multiple 属性规定可同时选择多个选项
- selected
- readonly
效果图.png
扫一扫
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
