HTML表格与表单
先奉上知识一览
表格
简单介绍
常用标签：
- <tr> 定义表格的行
- <td>定义表格的单元
- <th>定义表格的表头
- <caption>定义表格标题
其他标签：
- <thead>定义表格的页眉
- <tbody>定义表格的主体
- <tfoot>定义表格的页脚
- <col>定义用于表格列的属性
- <colgroup>定义表格列的组
属性：
- colspan 横跨列
- rowspan 横跨行
- border 规定表格边框的宽度
- cellpadding 规定单元边沿与其内容之间的空白
- cellspacing 规定单元格之间的空白
- width 规定表格的宽度
表格数据（table data），即数据单元格的内容含文本、图片、列表、段落、表单、水平线、表格等
部分实例
- <tr> 定义表格的行
- <td>定义表格的单元
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>结果：
- <th>定义表格的表头
<table border="1">
<tr>
<th>第一节</th>
<th>第二节</th>
</tr>
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>结果：
- <caption>定义表格标题
<table border="1">
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>结果：
- colspan 横跨列
<table border="1">
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td colspan="2">英</td>
</tr>
</table>结果：
- rowspan 横跨行
<table border="1">
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td rowspan="2">英</td>
<td>数</td>
</tr>
<tr>
<td>政</td>
</tr>
</table>结果：
- border 规定表格边框的宽度（与上面代码比较）
<table border="10">
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td rowspan="2">英</td>
<td>数</td>
</tr>
<tr>
<td>政</td>
</tr>
</table>结果：
- cellpadding 规定单元边沿与其内容之间的空白
<table border="1">
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>
<h5>cellpadding：</h5>
<table border="1"
cellpadding="10">
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>结果：
- cellspacing 规定单元格之间的空白
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>
<h4>有 cellspacing：</h4>
<table border="1" cellspacing="10">
<tr>
<td>数</td>
<td>语</td>
</tr>
<tr>
<td>英</td>
<td>政</td>
</tr>
</table>结果：
表单
简单介绍
常用标签：
<input>
- 文本输入 type=“text”：定义常规文本输入
- 单选框 type=“radio”：定义单选按钮输入（选择多个选择之一）
- 提交按钮：type=“submit”
- 重置按钮 type=“reset”
- 按钮 type=“button” 没有默认的行为，但是必须有一个onclick事件句柄以便使用
- 复选框 type=“checkbox”
- 密码输入 type=“password”
- 邮箱 type="email"
- 日期选择框 type="data"
- 月份选择框 type="mouth"
- 颜色选择器 type="color"
- 数字选择框 type="number"
- 隐藏域标识（不显示在浏览器中） type=“hidden”
<button>
- 提交按钮：type=“submit”
- 重置按钮 type=“reset”
- 按钮 type=“button” 没有默认的行为，但是必须有一个onclick事件句柄以便使用
<select>
- <select>......</select>
- <option></option>定义下拉选项
<textarea>
- <textarea>......</textarea>
- cols 列数（文本区宽度）
- rows 行数（文本区高度）
部分属性
- Action：定义在提交表单时执行的动作；表示提交服务器的地址，跳转页面。如果省略action 属性，则action会被设置为当前页面
- Method：设置提交表单的方式，规定在提交表单时所用的HTTP方法（GET或POST）。（1）当您使用 GET 时，表单数据在页面地址栏中是可见的；GET 最适合少量数据的提交。浏览器会设定容量限制；请求安全性没有post高。（2）POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。例如：正在更新数据，或者敏感信息（密码）没有。请求参数长度限制。
- readonly：只读标识；不可输入内容；disabled：禁用标识；不可输入内容 区别：只读元素值（value）会提交到服务端，而禁用值不会提交到服务端
注意：
input（button）和button（button）的区别：input不能嵌入其他图片之类的标签；button可以嵌套
部分实例
input
- 文本输入 type=“text”：定义常规文本输入
<form>
姓名:<br>
<input type="text" name="name">
<br>
年龄:<br>
<input type="text" name="age">
</form> 结果：
- 密码输入 type=“password”
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="password">
</form> 结果：
- 单选框 type=“radio”：定义单选按钮输入（选择多个选择之一）
<form>
<input type="radio" name="sex" value="男" checked>Male
<!-- checked 表示设置为默认选中状态 -->
<br>
<input type="radio" name="sex" value="女">Female
</form>结果：
- 提交按钮：type=“submit”
<form action="action_page.php">
姓名:<br>
<input type="text" name="name" value="zy">
<br>
年龄:<br>
<input type="text" name="age" value="21">
<br><br>
<input type="submit" value="Submit">
</form> 结果：
- 复选框 type=“checkbox”
<form>
<input type="checkbox" name="grade" value="100">我得了100分
<br>
<input type="checkbox" name="grade" value="92">我得了92分
</form> 结果：
- 按钮 type=“button” 没有默认的行为，但是必须有一个onclick事件句柄以便使用
<form>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</form> 结果：
- 数字选择框 type="number"
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>结果：
- 日期选择框 type="data"
<form>
Birthday:
<input type="date" name="Birthday">
</form>结果：
- 颜色选择器 type="color"
<form>
选择你喜欢的颜色：
<input type="color" name="favcolor">
</form>结果：
- 月份选择框 type="mouth"
<form>
生日 (月份和年份):
<input type="month" name="bdaymonth">
</form>结果：
- 邮箱 type="email"
<form>
E-mail:
<input type="email" name="email">
</form>结果：
select
- <select>......</select>
- <option></option>定义下拉选项
<form action="action_page.php">
<select name="学科">
<option value="math">数学</option>
<option value="chinese">语文</option>
<option value="english">英语</option>
/select>
</form> 结果：
textarea
- <textarea>......</textarea>
- cols 列数（文本区宽度）
- rows 行数（文本区高度）
<form >
<textarea name="message" rows="10" cols="30">
学好数理化，走遍天下都不怕
</textarea>
</form> 结果：
button
<form >
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form> 结果：
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
