Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:内联框架有意思
1.最简单的的一个注册表单结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单</title>
</head>
<body>
<form action="b.html" method="POST">
<label for="username">账号:</label>
<input
type="text"
id="username"
name="username"
placeholder="至少6位"
autofocus
required
/>
<label for="email">邮箱:</label>
<input
type="email"
id="email"
name="email"
placeholder="admin@focus.com"
required
/>
<label for="pwd1">密码:</label>
<input
type="password"
id="pwd1"
name="pwd1"
placeholder="至少输入6位,并且包含字母和数字"
required
/>
<label for="pwd2">确认:</label>
<input
type="password"
id="pwd2"
name="pwd2"
placeholder="****"
required
/>
<button type="submit">提交</button>
</form>
</body>
</html>
2.单选框和复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>单选按钮和复选框</title>
</head>
<body>
<form action="b.html" method="GET">
<!-- 单选框 -->
<label for="male">性别:</label>
<div>
<input type="radio" name="gender" id="male" checked /><label for="male"
>男</label
>
<input type="radio" name="gender" id="female" /><label for="female"
>女</label
>
<input type="radio" name="gender" id="secret" /><label for="secret"
>保密</label
>
</div>
<!-- 复选框 -->
<label for="">兴趣:</label>
<div>
<input type="checkbox" name="hobby[]" id="game" /><label for="game"
>游戏</label
>
<input type="checkbox" name="hobby[]" id="write" /><label for="write"
>写字</label
>
<input type="checkbox" name="hobby[]" id="read" checked /><label
for="read"
>阅读</label
>
<input type="checkbox" name="hobby[]" id="car" /><label for="car"
>开车</label
>
</div>
<button type="submit">提交</button>
</form>
</body>
</html>
3.下拉列表和下拉多选列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>下拉选择</title>
</head>
<body>
<form action="b.html" method="GET">
<!-- 单选框 -->
<!-- <label for="edu">学历:</label> -->
<!-- <div> -->
<!-- 单选下拉列表 -->
<!-- <select name="edu" id="edu">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">专科</option>
<option value="5" selected>本科</option>
</select> -->
<!-- </div> -->
<!-- 多选列表 -->
<label for="hobby">兴趣爱好:</label>
<select name="hobby" id="hobby" size="6" multiple>
<option value="1">look</option>
<option value="2">write</option>
<option value="3" selected>read</option>
<option value="4">run</option>
<option value="5" selected>go</option>
</select>
<button type="submit">提交</button>
</form>
</body>
</html>
4.文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文件上传</title>
</head>
<body>
<!-- post提交 form-data二进制流传输 -->
<form action="b.html" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="800" />
<input type="file" name="head" id="head" /><label for="head">头像</label>
<button type="submit">提交</button>
</form>
</body>
</html>
5.文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本域</title>
</head>
<body>
<form action="b.html" method="POST">
<textarea
name="desc"
id="desc"
cols="30"
rows="10"
placeholder="请输入..."
></textarea>
<button type="submit">提交</button>
</form>
</body>
</html>
6.控件的 from 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>控件的form属性</title>
</head>
<body>
<form id="register"></form>
<!-- form下的控件 不在from标签区域内,也可以实现from元素的填充 -->
<input type="text" name="" id="" form="register" />
<button form="register" formaction="b.html" formmethod="GET">提交</button>
</body>
</html>
7.iframe 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iframe案例</title>
</head>
<body>
<header>xx后台</header>
<aside>
<a href="http://www.baidu.com" target="show">百度</a>
<a href="http://www.qq.com" target="show">qq</a>
<a href="http://www.taobao.com" target="show">taobao</a>
<a href="http://www.360.com" target="show">360</a>
</aside>
<main>
<iframe src="" name="show" width="600" height="500"></iframe>
</main>
</body>
</html>