HTML——表单类的标签第11关:表单元素的综合案例本关任务:完成⼀个表单的创建任务。
这⾥标签要按照规定格式来写,因为有<div>标签,会⾃动换⾏,就不⽤<br>标签了。
属性的先后顺序为: type -- id -- class -- name -- value ,其他需要添加的属性最后写。
其他要求如下:
⽤户名:添加类mon;
昵称:添加类mon;
性别:name属性的值为sex,禁⽤保密;
男:<label>标签的for属性的值为male;
⼥:<label>标签的for属性的值为female;
保密:<label>标签的for属性的值为other;
教育程度:添加类mon,默认选中本科;
选项有:⾼中,中专,⼤专,本科,硕⼠,博⼠,其他;
婚姻状况:name属性的值为state,默认选中未婚;
未婚:<label>标签的for属性的值为single;
已婚:<label>标签的for属性的值为married;
保密:<label>标签的for属性的值为secret;
兴趣爱好:name属性的值为hobby,默认选中看电影;
踢⾜球:<label>标签的for属性的值为football;
打篮球:<label>标签的for属性的值为basketball;
看电影:<label>标签的for属性的值为film;
描述⾃⼰的特点:添加类mon,字符最⼤长度为20;
提交:添加空<span></span>,⽤来占位,添加类mon,value值为提交。
要求:像“⽤户名、昵称”这些采⽤<span>标签包裹⽂本,⽽‘男、⼥’这些单选框和多相框采⽤<label>标签包裹⽂本。
效果如下:
下拉框:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
width: 40%;
margin: 20px auto;
}
mon{
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" />
<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"/>html中提交表单用什么属性
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>
{
width:230px;
height: 30px;
}
</style>
</head>
<input type="password" class="com"/>
改变⼤⼩、宽度等。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。