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. 表格与表单