本关任务：完成一个表单的创建任务。
这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。
属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。
其他要求如下：
-
用户名：添加类
.common； -
昵称：添加类
.common； -
性别：
name属性的值为sex，禁用保密；-
男：
<label>标签的for属性的值为male； -
女：
<label>标签的for属性的值为female； -
保密：
<label>标签的for属性的值为other；
-
-
教育程度：添加类
.common，默认选中本科；- 选项有：
高中，中专，大专，本科，硕士，博士，其他；
- 选项有：
-
婚姻状况：
name属性的值为state，默认选中未婚；-
未婚：
<label>标签的for属性的值为single； -
已婚：
<label>标签的for属性的值为married； -
保密：
<label>标签的for属性的值为secret；
-
-
兴趣爱好：
name属性的值为hobby，默认选中看电影；-
踢足球：
<label>标签的for属性的值为football； -
打篮球：
<label>标签的for属性的值为basketball； -
看电影：
<label>标签的for属性的值为film；
-
-
描述自己的特点：添加类
.common，字符最大长度为20； -
提交：添加空
<span></span>，用来占位，添加类.common，value值为提交。
要求：像“用户名、昵称”这些采用<span>标签包裹文本，而‘男、女’这些单选框和多相框采用<label>标签包裹文本。
效果如下：
下拉框：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
width: 40%;
margin: 20px auto;
}
.common{
width:230px;
height: 30px;
}
span{
display:inline-block;
width: 150px;
text-align: right;
}
div{
margin-bottom: 10px;
}
</style>
</head>
<body>
<form class="container">
<!-- ********* Begin ********* -->
<div >
<span>用户名：</span>
<input type="text" class="common" />
</div>
<div>
<span>昵称：</span>
<input type="text" class="common"/>
</div>
<div>
<span>性别：</span>
<label for="male">
<input type="radio" id="male" name="sex"/>男
</label>
<label for="female">
<input type="radio" id="female" name="sex"/>女
</label>
<label for="other">
<input type="radio" id="other" name="sex" disabled="disabled"/>保密
</label>
</div>
<div >
<span>教育程度：</span>
<select class="common">
<option >高中</option>
<option >中专</option>
<option >大专</option>
<option selected="select">本科</option>
<option >硕士</option>
<option >博士</option>
<option >其他</option>
</select>
</div>
<div>
<span>婚姻状况：</span>
<label for="single">
<input type="radio" id="single" name="state" checked="checked"/>未婚
</label>
<label for="married">
<input type="radio" id="married" name="state"/>已婚
</label>
<label for="secret">
<input type="radio" id="secret" name="state"/>保密
</label>
</div>
<div>
<span>兴趣爱好：</span>
<label for="football">
<input type="checkbox" id="football" name="hobby"/>踢足球
</label>
<label for="basketball">
<input type="checkbox" id="basketball" name="hobby"/>打篮球
</label>
<label for="film">
<input type="checkbox" id="film" name="hobby" checked="checked"/>看电影
</label>
</div>
<div>
<span>描述自己的特点：</span>
<textarea maxlength="20" class="common"></textarea>
</div>
<div>
<span></span> <input type="submit" value="提交" class="common"/>
</div>
<!-- ********* End ********* -->
</form>
</body>
</html>知识点 ：
1.创建文本框
昵称：
<input type="text" name="nickName"/>2.创建密码框
密码：<input type="password" name="check" value="123"/>3.创建单选框
<input type="radio" name="question"/>A：高级文本语言4.创建多选框
<input type="checkbox" name="relax"/>宅5.默认选中 checked元素
><input type="radio" checked="checked" name="marry"/>未婚6.禁用 disabled元素
<input type="radio" name="degree" disabled="disabled" />困难7.<label>标签 焦点会自动定位到与<label>标签绑定的表单元素上
input中的id必须存在且与for相同。
属性的先后顺序为：type -- id -- name。
<label for="user">用户：</label>
<input type="" id="user" name="user"/>8.下拉列表 select
<select>
<option>问答</option>
<option>分享</option>
<option>招聘</option>
<option selected="selected">客户端测试</option>
</select>其中
selected="selected"默认选中
9.文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ********* Begin ********* -->
<style>
textarea {
width:200px;
height:120px;
}
</style>
</head>
<body>
用一句话描述自己的特点：<textarea maxlength="15"></textarea>
<!-- ********* End ********* -->
</body>
</html>10.提交按钮
<input type="submit" value="submit"/>11.class类
<head>
<meta charset="UTF-8">
<style>
.com{
width:230px;
height: 30px;
}
</style>
</head> <input type="password" class="com"/>改变大小、宽度等。
扫一扫
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
