HTML表格表單及框架標簽

一.表格標簽

1.<table></table> 創建表格

2.<caption></caption>?表格的標題

3.<tr></tr>Table Row（表格行）

4.<td></td>Table Data（表格數據）其中有屬性rowspan="2" colspan="2" 用來優化表格合并表格

5.? ? <thead></thead>表格頭部標簽 ? ? <tbody></tbody>? ? ?<tfoot></tfoot>? 將表格分成三個部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table bgcolor="#ff6347" border="1" width="80" height="200" align="center" cellspacing="0"><caption><h2>我是表格的標題</h2></caption><tr align="center" valign="top" bgcolor="red"><td rowspan="2">1</td><td colspan="2">2</td><td>3</td><td>4</td><td>5</td></tr></table>
</body>
</html>

效果展示:

二.表單

1.<form action="" method="post" enctype="multipart/form-data" >?</form>,其中 action屬性表示數據提交到的路徑??

注意:

如果表單項中出現文件上傳項那么需要兩件事

? ? ? ? 1.表單的傳輸方式必須為post方式

? ? ? ? 2.更改傳輸編碼格式在form標簽中enctype="multipart/form-data"

2.<input type="text" name="username" value="" > 文本格式

3.<input type="password" name="password" value="">密碼格式

4.?<input type="radio" id="nan" name="sex" value="1"> 單選框

如

5.<input type="checkbox" name="hobby[]" id="one" value="0">? 多選框?

注意在設置成多選框時name后面一定要有[].這樣后端才能拿到數據

<!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><h2> 用戶登入</h2>如果表單項中出現文件上傳項那么需要兩件事1.表單的傳輸方式必須為post方式2.更改傳輸編碼格式 在form標簽中enctype="multipart/form-data"<form action="" method="post" enctype="multipart/form-data" >用戶名:<input type="text" name="username" value="" ><br>密碼:<input type="password" name="password" value=""><br><input type="radio" id="nan" name="sex" value="1"><label for="nan">男</label><input type="radio" id="nv" name="sex" checked value="2"><label for="nv">女</label><label ><input type="radio" id="w" name="sex" value="3" >未知</label><input type="submit" value="登入"><br>愛好:<input type="checkbox" name="hobby[]" id="one" value="0"><label for="one">學習</label><input type="checkbox" name="hobby[]" value="1" checked>打球<input type="checkbox" name="hobby[]" value="2">吃<input type="checkbox" name="hobby[]" value="3">喝<input type="checkbox" name="hobby[]" value="4">樂<br><input type="file" name="" id=""><input type="hidden" name="hidde" id="hello"></form></body>
</html>

效果展示

會員表? ?

thead,tbody,tfoot的運用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>tbody:hover{background-color: tomato;}
</style>
</head>
<body><table border="1" width="600" align="center" cellpadding="0" cellspacing="0"><thead><tr><th>編號</th><th>用戶名</th><th>年齡</th><th>性別</th><th>操作</th></tr></thead><tbody><tr align="center"><td>1</td><td>admin</td><td>18</td><td>男</td><td><a href="">刪除</a><a href="">修改</a> </td></tr><tr align="center"><td>1</td><td>admin</td><td>18</td><td>男</td><td><a href="">刪除</a><a href="">修改</a> </td></tr><tr align="center"><td>2</td><td>xiaohong</td><td>18</td><td>女</td><td><a href="">刪除</a><a href="">修改</a> </td></tr><tr align="center"><td>3</td><td>xiaoming</td><td>19</td><td>男</td><td><a href="">刪除</a><a href="">修改</a> </td></tr><tr align="center"><td>4</td><td>xiaohei</td><td>19</td><td>男</td><td><a href="">刪除</a><a href="">修改</a> </td></tr></tbody><tfoot><tr><td colspan="5" align="center"><a href="">首頁</a><a href="">上一頁</a><a href="">下一頁</a><a href="">尾頁</a></td><!-- <td></td><td></td><td></td><td></td> --></tr></tfoot></table>
</body>
</html>

下拉列表

1.<select>?</select> 下拉列表標簽

2.<option value=""></option> 選項標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" method="get"><input type="text" name="" id=""><!-- <input type="image" src="../../img/img2.png" name="" id="" width="50"> --><button>提交</button><input type="submit" name="submit" id=""><button type="button">這只是一個按鈕</button><input type="reset" value="重置" name="" id="">
<br>
<!-- 多行文本輸入  -->地址:<textarea name="address" id="" rows="5" cols="50">  admim</textarea><!-- 下拉列表 --><select name="xueli" id=""><option value="xueli">--請選擇--</option><option value="0">小學</option><option value="1">初中</option>  有value拿value沒有就拿文本<option value="2">高中</option><option value="3">專科</option><option value="4" selected>本科</option><option value="5">研究生</option></select></form></body>
</html>

效果展示

h5中新增表單

請看代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5中新增的表單</title>
</head>
<body><form action="" method="get"><fieldset><legend>個人基本信息</legend>姓名:<input type="text" name="name" id="">性別:<input type="radio" name="sex" value="0">女<input type="radio" name="sex" value="1">男<br>年齡:<input type="text" name="age" id="" value="">電話:<input type="text" name="phone" id=""></fieldset><br>        <fieldset><legend>基本情況</legend>身高:<input type="text" name="height" id="">體重:<input type="text" name="weight" id=""><br>三圍<input type="text" name="" id=""></fieldset><select name="" id=""><option value="">--請選擇--</option><optgroup label="服裝"><!-- <option value="">服裝</option> --><option value="">女裝</option><option value="">童裝</option></optgroup><optgroup label="數碼"><!-- <option value="">數碼</option> --><option value="">筆記本</option><option value="">臺式</option><option value="">照相機</option></optgroup>
</select><br>   郵箱驗證<input type="email" name="email" id="">URL驗證<input type="url" name="url" id=""><input type="submit" name="submit" id="">    <br>數值<input type="number" name="num" id="" min="0" max="100">滑塊<input type="range" name="range" id=""min="0" max="100" value="100"><br>搜索<input type="search" name="search" id=""><br>顏色選取<input type="color" name="color" id="">電話:<input type="tel" name="phone" id="">日期<input type="date" name="" id=""><br>時間<input type="time" name="" id=""><br>周<input type="week" name="" id=""><br>月<input type="month" name="" id=""><br><input type="datetime-local" name="" id=""></form></body>
</html>

Form表單常用屬性

1.readonly只讀

2.novalidate取消表單驗證適用于Form標簽

3.multiple可以選擇多個

4.pattern正則匹配

5.step 用于數值表單設置步長

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" method="get" novalidate> novalidate取消表單驗證 適用于Form標簽<input type="text" name="admin" id="" value="admin" readonly><br><input type="text" name="user1" id="" value="admin" disabled>  <br><input type="text" name="user2" id="" autofocus><br><input type="text" name="user3" id="" required placeholder="手機號/用戶名/郵箱"><input type="submit" name="" id=""><br><input type="file" name="file" id="" multiple> multiple可以選擇多個<br><input type="text" name="pattern" id="" pattern="[a-z]">正則匹配<br><input type="number" name="" id="" step="2"><input type="submit" name="" id=""formaction="http://www.baidu.com"formmethod="post"formenctype="multipart/form-data"value="提交"></form>
</body>
</html>

框架標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>框架標簽<iframe src="http://www.lmonkey.com" width="100%" frameborder="0"></iframe> 
</body>
</html>

如