HTML基础二（HTML）_要求用户输入电子邮件地址,应选用的表单控件()-优快云博客

本文详细介绍了HTML中如何插入表格，包括表格的标签、属性及其应用，如跨列和跨行。接着讲解了如何在网页中创建表单，包括表单标签、属性以及各种表单控件如文本域、密码域、单选按钮、多选按钮、文件输入、按钮等，并解释了相关属性的用途和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.网页中插入表格：

1.标签与属性：

（1）表格相关标签：

<table></table>：双标签，镶嵌于body标签内，定义一个表格
<tr></tr>：双标签，镶嵌于table标签内，定义表格中的一行
<th></th>：双标签，镶嵌于tr标签内，定义表头单元格
<td></td>：双标签，镶嵌于tr标签内，定义处表头之外的单元格

（2）表格相关属性：

1.border：表格边框的宽度（pixels）
2.bordercolor：表格边框的颜色
3.background：表格背景图
4.bgcolor：表格背景颜色
5.cellpadding : 单元边沿与其内容之间的距离（pixels）
6.cellspacing : 单元格之间的空白（pixels）
7.width：规定表格元素的宽度（pixels或%）
8.height：规定表格元素的高度（pixels或%）
9.align：表格的对齐方式（left center right）

提示：很多属性既可以写在table里赋给整个表格，又可以写在tr里赋给单行，也可以写在th和td里赋给一个单元格

2.插入表格实例：

<table width="50%" align="center" border="3" bgcolor="yellow" cellpadding="20" cellspacing="2" >
	<tr>
		<th>英雄</th>
		<th>HP</th>
		<th>终极技能</th>
	</tr>
	<tr align="center">
		<td>士兵76</td>
		<td>200</td>
		<td>战术目镜</td>
	</tr>
	<tr align="center">
		<td>死神</td>
		<td>250</td>
		<td>死亡绽放</td>
	</tr>
	<tr align="center">
		<td>莫伊拉</td>
		<td>200</td>
		<td>聚合射线</td>
	</tr>
	<tr align="center">
		<td>路霸</td>
		<td>600</td>
		<td>鸡飞狗跳</td>
	</tr>
	<tr align="center">
		<td>狂鼠</td>
		<td>200</td>
		<td>炸弹轮胎</td>
	</tr>
</table>

显示效果：
在这里插入图片描述

3.单元格跨列和跨行：

1.跨列：td标签内使用colspan属性，colspan=“x” 代表跨x列
2.跨行：td标签内使用rowspan属性，rowspan=“x” 代表跨x行
3.注意：一定要删除已经被占用位置的单元格，否则多余单元格会被挤出表格

<tr align="center">
	<td rowspan="2" colspan="2">死神</td>
	<td >死亡绽放</td>
</tr>
<tr align="center">
	<td>聚合射线</td>
</tr>
<tr align="center">
	<td rowspan="2">路霸&狂鼠</td>
	<td>600</td>
	<td>鸡飞狗跳</td>
</tr>
<tr align="center">
	<td>200</td>
	<td>炸弹轮胎</td>
</tr>
<tr align="center">
	<td>吴希浙</td>
	<td colspan="2">可惜</td>
</tr>

显示效果：
在这里插入图片描述

二.网页中插入表单：

1.标签与属性：

（1）表单标签：

<form></form>：双标签，镶嵌于body标签内，定义一个表单

相关属性：
1.action------规定向何处发送送提交的表单数据，值：URL
2.method：规定以何种方式将表单数据传送到服务器，值：get/post
注意：所有表单控件都必须放在< form >< /form >标签之间，否则用户输入的信息无法提交到服务器！

（2）表单控件标签：< input >

文本域：当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
	<input type="text" name="firstinput" value="hello!" />
</form>

相关属性：
1.type：当type = "text"时，输入框为文本输入框
2.name：为文本框命名，以备后台程序使用（方便区分）
3.value：为文本输入框设置默认值(一般起到提示作用)

密码域：当用户要在表单中键入密码时，就会用到密码框

<form>
	<input type="password" name="secondinput"/>
</form>

相关属性：
1.type：当type = "password"时，输入框为密码输入框
2.name：为文本框命名，以备后台程序使用（方便区分）
3.value：为文本输入框设置默认值(一般起到提示作用)

单选按钮：

<form>
	性别：
	<input type="radio" name="xingbie" value="man"/>男
	<input type="radio" name="xingbie" value="woman"/>女
</form>

相关属性：
1.type : 当 type = “radio” 时，控件为单选框
2.value：提交数据到服务器的值
3.name：为控件命名，name相同为一组，同组单选按钮name属性值必须相同
4.checked：当添加 checked 时，该选项默认选中

多选按钮（复选框）：

<form>
	你喜欢玩什么游戏：
	<input type="checkbox" name="game" value="LOL"/>LOL
	<input type="checkbox" name="game" value="OW"/>OW
	<input type="checkbox" name="game" value="CF"/>CF
</form>

相关属性：
1.type : 当 type =“checkbox” 时，控件为复选框
2.value：提交数据到服务器的值同一组按钮，value属性值需要不同！
3.name：为控件命名，同组复选框name属性值需要一致
4.checked：当添加 checked 时，该选项默认选中

文件：

<form>
	<input type="file" name="file1"/>
</form>

相关属性：
1.type : 当 type =“file” 时，控件为文件域
2.name：为控件命名

按钮：（普通按钮、提交按钮、重置按钮）

<form>
	<input type="button" name="button1" value="按钮"/>
	<input type="reset" name="reset1" value="重置"/>
	<input type="submit" name="submit1" value="提交" />
</form>

相关属性：
1.type : 当 type =“button” 时，控件为按钮
2.type : 当 type =“reset” 时，控件为重置按钮
3.type : 当 type =“submit” 时，控件为提交按钮
4.value：按钮名
5.name：为控件命名

受限制number：

<form>
	<input type="number" name="number1" min="5" max="80" step="5" value="30">
</form>

相关属性表：
在这里插入图片描述

滑块range：

<form>
	<input type="range" name="range1" min="5" max="80">
</form>

相关属性：
1.type : 当 type =“range” 时，控件为滑块
2.name：为控件命名
3.可以使用min，max，step，value属性

color选择器：

<form>
	请选择你最喜欢的颜色：
	<input type="color" name="mycolor">
</form>

相关属性：
1.type : 当 type =“color” 时，控件为颜色选择器
2.name：为控件命名

包含日期的输入字段data：(month\week\time\datetime类似)

<form>
	请输入你的生日：
	<input type="date" name="data1" min="1949-10-01" max="2019-03-19">
</form>

相关属性：
1.type : 当 type =“date” 时，控件为日前选择器
2.name：为控件命名
3.可以使用min，max属性加以限制

电子邮件地址email：

<form>
	请输入你电子邮件地址：
	<input type="email" name="email1">
</form>

相关属性：
1.type : 当 type =“email” 时，控件为电子邮件
2.name：为控件命名

（3）< textarea >< /textarea >：用于插入多行文本域

<form>
	<textarea name="cat" rows="10" cols="50">
		hello world！
	</textarea>
</form>

相关属性：
1.name：为控件命名
2.rows：规定文本区内可见行数
3.cols ：规定文本区内可见宽度

（4）下拉列表：

标签：
1.< select >< /select >：插入下拉列表
2.< option >< /option >：定义下拉列表选项

<form>
	<select name="英雄">
		<option value="one">丽桑卓</option>
		<option value="two">瑞兹</option>
		<option value="three" selected>加里奥</option>
		<option value="four">飞机</option>
		<option value="five">卡萨丁</option>
	</select>
</form>