目录
一、实验一HTML基础
HTML——表单类的标签
第1关：表单元素——文本框
第2关：表单元素——密码框
第3关：表单元素——单选框
第4关：表单元素——多选框
第5关：表单元素——checked属性
第6关：表单元素——disabled 属性
第7关：表单元素——label 标签
第8关：表单元素——下拉列表
第9关：表单元素——文本域
第10关：表单元素——提交按钮
第11关：表单元素的综合案例
一、实验一HTML基础
HTML——表单类的标签
第1关：表单元素——文本框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* -->昵称：<input type="text" name="nickName"\> <!-- ********* End ********* -->
</body>
</html>第2关：表单元素——密码框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><input type="password" name="check" value="123" /><!-- ********* End ********* -->
</body>
</html>第3关：表单元素——单选框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>1. HTML是什么语言？(单选题)<br><!-- ********* Begin ********* --><p><input type="radio" name="question" />A：高级文本语言 <p><input type="radio" name="question" />B：超文本标记语言 <p><input type="radio" name="question" />C：扩展标记语言 <p><input type="radio" name="question" />D：图形化标记语言<!-- ********* End ********* -->
</body>
</html>第4关：表单元素——多选框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>休闲方式:<br><!-- ********* Begin ********* --><p><input type="checkbox" name="relax"/>逛街 <p><input type="checkbox" name="relax"/>看电影 <p><input type="checkbox" name="relax"/>宅<!-- ********* End ********* -->
</body>
</html>第5关：表单元素——checked属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>婚姻状况:<br><!-- ********* Begin ********* --><p><input type="radio" name="marry" checked="checked"/>未婚<p><input type="radio" name="marry"/>已婚<!-- ********* End ********* -->
</body>
</html>第6关：表单元素——disabled 属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>难度系数:<br><!-- ********* Begin ********* --><p><input type="radio" name="degree"/>简单<p><input type="radio" name="degree"/>中等<p><input type="radio" name="degree" disabled="disabled"/>困难<!-- ********* End ********* -->
</body>
</html>第7关：表单元素——label 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><label for="user">用户：</label><input type="text" id="user" name="user"/><br><label for="pwd">密码：</label><input type="password" id="pwd" name="password"/><br><!-- ********* End ********* -->
</body>
</html>第8关：表单元素——下拉列表
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>选择版块：<!-- ********* Begin ********* --><select><option>问答</option><option>分享</option><option>招聘</option><option selected="selected">客户端测试</option></select> <!-- ********* End ********* -->
</body>
</html>第9关：表单元素——文本域
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- ********* Begin ********* --><style>textarea {width:200px;height:120px;}</style>
</head>
<body>用一句话描述自己的特点：<!-- ********* End ********* --><textarea maxlength="15"></textarea>
</body>
</html>第10关：表单元素——提交按钮
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><label for="user">用户：</label><input type="text" id="user" name="user"/><br><label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br><!-- ********* Begin ********* --><input type="submit" value="submit"/><!-- ********* End ********* -->
</body>
</html>第11关：表单元素的综合案例
<!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"/>保密</lable>
</div>
<div><span>教育程度：</span><select class="common"><option>高中</option><option>中专</option><option>大专</option><option selected="selected">本科</option><option>硕士</option><option>博士</option><option>其他</option></select>
</div>
<div><span>婚姻状况：</span><label for="single" name="state"><input type="radio" checked="checked" id="single"/>未婚</label><label for="married" name="state"><input type="radio" id="married"/>已婚</label><label for="secret" name="state"><input type="radio" id="secret"/>保密</label></div><div><span>兴趣爱好：</span><label for="football" name="hobby"><input type="checkbox" id="football"/>踢足球</label><label for="basketball" name="hobby"><input type="checkbox" id="basketball"/>打篮球</label><label for="film"><input type="checkbox" id="film" checked="checked" name="hobby"/>看电影</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>后面的下次再更新，我要做其他事了
