html5-5 HTML5表單元素和內嵌框架
一、總結
一句話總結：單選框和多選框選的時候外面加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>