HTML:5 表格表單
要點：
-
表格的用法html
-
表單元素的用法編程
-
iframe的用法框架
◆table的基本結構
<table>post
<caption>標題</caption>學習
<tr>（行）ui
<td>第1行 第1列</td>spa
<td>第1行 第2列</td>.net
</tr>orm
<tr>（行）htm
<td>第2行 第1列</td>
<td>第2行 第2列</td>
</tr>
</table>
注：table>tr*2>td*3(兩行三列快捷)
◇<table>的經常使用屬性
- border：設置表單邊框大小
- width：設置表單的寬度
- hight：設置表單的高度
- align：設置表單對齊方式
- center：居中對齊
- left：左對齊
- right：右對齊
- bgcolor：設置表單背景色
- sellspacing：設置單元格內容與邊框這之間的間隔
語法格式：<table border="5" width="300px" height="200px" align="center" bgcolor="#595959" cellspacing="2px">
</table>
- <tr></tr>經常使用屬性：<tr>包含一個或多個<th>或<td>
- align：表格內容 對齊方式（center（居中對齊）、 left（左對齊） 、right（右對齊））
- height：設置行高
- valig：top 頂部對齊，bottom 底部對齊，middle 居中對齊
- bgcolor：設置背景色
語法格式：<tr height="50" align="center" valign="top" bgcolor="red">
<td>111</td>
<td>123</td>
</tr>
- <td></td>經常使用屬性
- width：設置單元格寬度
- rowspan=「2」：獨佔兩行 設置單元格可跨的行數
- colspan=「2」：獨佔兩列 設置單元格可跨的列數
- <th></th>的經常使用屬性
- baselion：基線對齊
示例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>表單練習</title>
</head>
<body>
<table cellspacing="0" align="center" height="300px" width="500px">
<tr>
<td align="center" bgcolor="#7F7F7F"><b>屬性</b></td>
<td align="center" colspan="2" bgcolor="#595959"><b>值和說明</b></td>
</tr>
<tr>
<td align="center" rowspan="3" bgcolor="#595959">align <br>水平對齊方式</td>
<td bgcolor="BFBFBF">left</td>
<td bgcolor="E7E7E7">左對齊</td>
</tr>
<tr>
<td bgcolor="E7E7E7">center</td>
<td bgcolor="BFBFBF">居中對齊</td>
</tr>
<tr>
<td bgcolor="BFBFBF">right</td>
<td bgcolor="E7E7E7">右對齊</td>
</tr>
<tr>
<td middle="center" align="center" bgcolor="7F7F7F" rowspan="4">valign <br>垂直對齊方式</td>
<td bgcolor="E7E7E7" >top</td>
<td bgcolor="BFBFBF" >頂端對齊</td>
</tr>
<tr>
<td bgcolor="BFBFBF">middle</td>
<td bgcolor="E7E7E7">居中對齊</td>
</tr>
<tr>
<td bgcolor="E7E7E7">bottom</td>
<td bgcolor="BFBFBF">低端對齊</td>
</tr>
<tr>
<td bgcolor="BFBFBF">baseline</td>
<td bgcolor="E7E7E7">基線對齊</td>
</tr>
</table>
</body>
</html>
◆表單和表單控件
◆表單語法
語法格式：<!-- 表單語法 -->
<form action="" method="">
.......
</form>
- cction：表單提交地址
- method：表單提交方式（post&get）
◆表單元素
語法格式：<input type="text" name="" value="">
- type：設置 input 元素類型
- button 、checkbox 、file 、hidden 、image、 password 、radio 、reset、submit、text
- name：設置 input 元素名稱
- value：設置 input 元素值
- size：設置文本框的長度
- maxlength：設置輸入文本框的最大字符長度
- required：設置位必填字段
- readonly：設置輸入字段爲只讀
- placeholder：設置用戶輸入字段的提示
- disabled：當 input 元素加載時禁用此元素（各類元素都可以用【灰色顯示】不可選）
- checked：規定此 input 元素 首次加載時 應當被選中
◆常見問題
- submit提交擁有name屬性的表單元素值 （必須賦予 name值才能提交）
- 複選框 checkbox 設置checked屬性使其選中
- 單選按鈕 radio 設置相同 name 值，實現單選
- redonly 與 disabled 的區別 ：redonly 爲只讀模式；disabled各類元素都可以用【灰色顯示】不可選
◆下拉框
語法格式：
<select name="annie" >
<option value="0">請選擇</option>
<option value="1">1991</option>
<option value="2">1992</option>
<option value="3">1993</option>
</select>年
◆多行文本框
- <textarea>文本內容</textarea>
- nanme：設置文本區的名稱
- rows：設置文本內可見行數
- cols：設置文本內的可見寬度
- maxlength：設置文本內最大字符數
語法格式：
<textarea name="Annie" id="" cols="30" rows="10">Annie的筆記</textarea>
◆表單元素分組
- 將表單內相關 元素分組
語法格式：
<form action="">
<fieldset>
<legend> Annie的表單</legend>
height: <input type="text">
weight: <input type="text">
</fieldset>
</form>
◆建立註冊頁面
- 結合<table>建立註冊表單
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單及嵌套的用法練習</title>
</head>
<body>
<form action="">
<fieldset>
<legend >用戶註冊</legend>
<table width="500" border="0">
<tr>
<td align="right">郵箱註冊：</td>
<td><input type="text"></td>
</tr>
<tr>
<td></td>
<td>你還能夠使用 <a href="">帳號</a>註冊或者<a href="">手機</a>號註冊</td>
</tr>
<tr>
<td align="right">建立密碼：</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">真實姓名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">性別：</td>
<td>
<input type="radio" name="A" checked="男">男
<input type="radio" name="A">女
<input type="radio" name="A">保密
</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="grade">
<option value="0" selected="selected">—請選擇—</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
</select>年
<select name="grade">
<option value="0" selected="selected">—請選擇—</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>月
<select name="grade">
<option value="0" selected="selected">—請選擇—</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>日
</td>
</tr>
<tr>
<td align="right">興趣愛好：</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="reset">
<input type="submit" value="註冊">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
◆行內框架
- <iframe>元素包含另一個文檔的內聯框架
- frameborder：設置是否顯示框架周圍的邊框
- height：設置iframe的高度
- marginheight：設置iframe的頂部和底部的邊距
- marginwidth：設置iframe的左側和右側的邊距
- name：是指iframe的名稱
- scrolling：設置是否在iframe中顯示滾動條
- yes no auto
- src：設置在iframe中顯示的文檔的路徑URL
- width：設置iframe的寬度
語法格式：
<a href="https://123.sogou.com/" target="Annie" >網址大全</a>
<br>
<iframe src="https://www.baidu.com" frameborder="0" name="Annie" height="
300" width="400" marginheight="30" marginwidth="30"></iframe>
◆iframe應用
- 配合超連接<a>標籤，target屬性是iframe顯示頁面切換效果
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單元素分組嵌套</title>
</head>
<body>
<a href="file:///D:/桃李科技編程學習/次日/table的屬性練習.html" target="annie">table的屬性練習</a>
<a href="file:///D:/桃李科技編程學習/次日/表單，嵌套的練習.html" target="annie">form表單語法應用</a>
<a href="https://my.oschina.net/u/3009742/home" target="annie">annie可馨</a>
<a href="http://www.qq.com" target="annie">tengxun</a>
<br>
<br>
<iframe src="https://my.oschina.net/u/3009742/home" name="annie" frameborder="10" width="500" height="500"></iframe>
</body>
</html>
- 1. html5--表格
- 2. Html5的表單
- 3. HTML5表單
- 4. html5的表單
- 5. 【HTML5】——表單
- 6. HTML5 5 表單
- 7. HTML5 簡單的表格製作（2）
- 8. JavaScript表格、表單
- 9. 表格和表單
- 10. 表格與表單
- 更多相關文章...
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Markdown 表格 - Markdown 教程
- • IntelliJ IDEA代碼格式化設置
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. html5--表格
- 2. Html5的表單
- 3. HTML5表單
- 4. html5的表單
- 5. 【HTML5】——表單
- 6. HTML5 5 表單
- 7. HTML5 簡單的表格製作（2）
- 8. JavaScript表格、表單
- 9. 表格和表單
- 10. 表格與表單