一、总结
一句话总结：单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了
1、html5如何实现文件上传？
必须加上enctype='multipart/form-data'
23 <form action="reg.php" method='post' enctype='multipart/form-data'>
24 <p>用户名:</p>
25 <p><input type="text" name='username'></p>
2、html5复选框如何传值？
name值后面加中括号
<input type="checkbox" name="love[]"> 打篮球
<input type="checkbox" name="love[]"> 踢足球
3、html属性disable和readonly的区别是什么？
readonly可以带值
readonly 可以带值
disabled 不能带值
4、html中限制表单提交最大长度的属性是什么？
maxlength属性
maxlength 最大长度
5、iframe内嵌框架有什么用？
内嵌别人做好的网页，比如百度的查身份证的功能
6、单选框和多选框选的时候如何能实现不瞄着点选？
外面加label就可以实现选后面文字也可以选中了
51 <label><input type="checkbox" name="love"> 打篮球</label>
52 <label><input type="checkbox" name="love"> 踢足球</label>
二、HTML5表单元素和内嵌框架
1、相关知识
表格:
<table width='100%' border='1px' cellspacing='0px'>
<tr>
<th>adlf</th>
<th>adlf</th>
<th>adlf</th>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</table>
表单:
<form action="reg.php" method='post' enctype='multipart/form-data'>
</form>
表单元素:
1.文本元素
<input type="text" name='username'>
2.密码元素
<input type="password" name='password'>
3.文件元素
<input type="file" name="img">
4.确认元素
<input type="submit" value="确认">
5.重置元素
<input type="reset" value="重置">
6.下拉菜单
<select name="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
7.单选
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 中
8.多选
<input type="checkbox" name="love[]"> 打篮球
<input type="checkbox" name="love[]"> 踢足球
<input type="checkbox" name="love[]"> 开大车
9.文本域
<textarea name="mess" cols="30" rows="10"></textarea>
表单属性:
readonly 可以带值
disabled 不能带值
maxlength 最大长度
iframe内嵌框架:
<iframe src="http://localhost/web" frameborder="0"></iframe>
frame框架:
<frameset rows="60,*" frameborder='1' border='1px'>
<frame src='top.html' name='top'>
<frameset cols='100,*'>
<frame src='left.html' name='left' noresize>
<frame src='right.html' name='right'>
</frameset>
</frameset>
点左侧的a链接如何打开右侧页面:
<a href='user/index.html' target='right'><button>查看用户</button></a>
如何在一个窗口中退出到最外层的窗口:
<a href="login.html" target='_top'><button>退出</button></a>
2、代码
表单完整实例
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{
8 font-family: 微软雅黑;
9 }
10
11 td{
12 text-align:left;
13 height:40px;
14 }
15
16 textarea{
17 resize:none;
18 }
19 </style>
20 </head>
21 <body>
22 <h1>请注册:</h1>
23 <form action="reg.php" method='post' enctype='multipart/form-data'>
24 <p>用户名:</p>
25 <p><input type="text" name='username'></p>
26 <p>密码:</p>
27 <p><input type="text" name='password'></p>
28 <p>文件上传:</p>
29 <p><input type="file" name='repassword'></p>
30 <p>邮箱:</p>
31 <p><input type="text" name='mail'></p>
32
33 <p>选择收货地址:</p>
34 <p>
35 <select name="city">
36 <option value="">北京</option>
37 <option value="">上海</option>
38 <option value="">广州</option>
39 </select>
40 </p>
41
42 <p>性别:</p>
43 <p>
44 <label><input type="radio" name="sex"> 男</label>
45 <label><input type="radio" name="sex"> 女</label>
46 <label><input type="radio" name="sex"> 中</label>
47 </p>
48
49 <p>爱好:</p>
50 <p>
51 <label><input type="checkbox" name="love"> 打篮球</label>
52 <label><input type="checkbox" name="love"> 踢足球</label>
53 <label><input type="checkbox" name="love"> 开大车</label>
54 <label><input type="checkbox" name="love"> 理发</label>
55 </p>
56
57 <p>请留言:</p>
58 <textarea name="mess" cols="100" rows="5"></textarea>
59
60 <p>
61 <input type="submit" value='Ok'>
62 <input type="reset" value='Cancel'>
63 </p>
64 </form>
65 </body>
66 </html>
