表格与表单
表格标签
- 表格
<table>
<tr>行
<td></td>列
</tr>
</table>
- th标签
内容会有加粗和居中效果
<table>
<tr>
<th></th>
</tr>
</table>
- colspan属性
在同一行内同时合并多个列
<table>
<tr>
<td colspan="5"></td>
合并原本的5个格子为1个格子
</tr>
</table>
- 表格的行合并属性
<table>
<tr rowspan="3">
在同一列中实现多行合并,并删除
该合并行之外的行。
<td></td>
</tr>
</table>
表单标签
用于收集不同类型的输入数据
常用属性:
- action:表示动作,值为服务器的地址,将表单的数据提交到该地址上进行处理。
- method:表示请求方式(get,post都是地址栏)。
get请求参数都在地址之后进行拼接,特点是不安全但效率更高,请求的大小受限制,约在2KB,一般用于查询数据。
post请求参数单独处理,特点是安全可靠但效率低,请求大小无上限,一般用于插入,删除,修改等操作。 - enctype:表示的是表单提交的类型。
表单提交
<form action="提交的目标位置" method="GET" enctype="application/x-www-form-urlencoded">
<input type="submit" value="提交" name="name">
value:按钮的提示信息
name:后台接收用户输入的信息
</form>
1.input元素
input元素是表单中的重要元素,可根据不同的type值,表现出不同状态。
主要属性值如下:
text:单行文本框<input type="text">
password:密码框
tel:联系方式
submit:表单提交按钮
button:普通按钮
reset:重置按钮
radio:单选框
date:日期框
time:时间框
datetime:日期和时间框
email:电子邮件输入
number:数值输入
file;文件上传
hidden:隐藏域
range:取值范围
color:取色按钮
image:图片提交按钮
button:普通按钮
注意:
单选框需要给name属性取值一致,才会达到互斥的效果。
照片提交按钮要提供照片的源路径。
重置按钮是更改为初始值
2.select元素
- 单项选择
<form action="index.html">
地区选择:
<select>
<option value="1">中国</option>
<option value="2">印度</option>
<option value="3">泰国</option>
<option value="4">日本</option>
<option value="5" selected="selected">韩国</option>
selected属性表示默认选项
</select>
<br>
<input class="c1" type="submit">
</form>
- 多项选择(Ctrl+Shift)
结合name,value属性进行提交
<form action="index.html">
喜欢的运动:
<select name="喜欢的运动" multiple="multiple">
<option value="1">乒乓球</option>
<option value="2" selected="selected">桌球</option>
<option value="3">游泳</option>
<option value="4">爬山</option>
<option value="5">篮球</option>
</select>
<br>
<input class="c1" type="submit">
</form>
结果如下:
index.html?喜欢的运动=2&喜欢的运动=3&喜欢的运动=4
3.textarea元素
<textarea cols="40" rows="5" name="s1"></textarea><br>
凡是涉及提交数据的,都必须添加name属性。
<input class="c1" type="submit">
提交结果:
index.html?喜欢的运动=3&s1=我爱你中国!