Web开发·期末不挂之第三章·HTML基础二（html实现表格和表单）

Posted 2021-06-27 只想婧婧的小菜鸡

html基础二

• 一、 表格✪✪✪
• 二、表单
• • 插入表单
  • 输入标签✪✪
  • 多行文本域
  • 下拉菜单
• 三、其他
• • label标签
  • 内联框架

---

一、 表格✪✪✪

插入表格: < table>< /table>

可用属性

• border： 表格边框的宽度（pixels）
• bordercolor：表格边框的颜色
• background：表格背景图
• bgcolor： 表格背景颜色
• width : 规定表格元素的宽度（pixels或%）
• height : 规定表格元素的高度（pixels或%）
• align： 表格的对齐方式（left center right）
• cellpadding : 单元边沿不其内容之间的距离（相当于单元格的内边距）
• cellspacing : 单元格之间的空白（pixels）

插入表格一行：< tr>< /tr>
表格标题性单元格：< th>< /th>
表格普通单元格：< td>< /td>

可用属性

• 行合并：rowspan
• 列合并：colspan

<table border="1px" align="center" cellpadding="50px" >
			<tr>
				<td colspan="2">物资类别</td>
				<td colspan="2"></td>
				<td colspan="2">名称</td>
				<td colspan="1"></td>
			</tr>
			<tr>
				<td colspan="7">入库领用记录</td>
			</tr>
			<tr>
				<td colspan="2">日期</td>
				<td rowspan="2">单位</td>
				<td rowspan="2">入库数</td>
				<td rowspan="2">领用数</td>
				<td rowspan="2">库存</td>
				<td rowspan="2">经手人</td>
			</tr>
			<tr>
			<td>月</td>
			<td>日</td>
				
			</tr>

		</table>

二、表单

插入表单

< form action="向何处发送URL " method="何种方式发送get/post ">< /form>

输入标签✪✪

< input type=“类型” name=“命名，以备后台使用，同一类型，命名应相同” value=“设置默认值” >

type可分类型：

• 文本输入框：text
• 密码输入框：password
• 单选框：radio 同组单选框name属性值相同，此时的value作为提交数据到服务器的值，可添加checked设置默认选中值
• 多选框：checkbox 上同
• 文件控件：file
• 提交按钮：submit
• 重置按钮：reset
• 普通按钮：button

多行文本域

< textarea> < /textarea>

可用属性：

• rows：规定文本区内可见行数。
• cols：规定文本区内可见列数。

下拉菜单

标签：< select name="">< /select>
列表项： < option value="">
可添加 selected 作为默认选中值

三、其他

label标签

< label for = “控件id名称”> 用户名：< input type = “text” id = “id名称” /> < /label>

点击 label 元素内文本，就会触发此控件。即当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

内联框架

< iframe>< /iframe>

可选属性

• src：文件的路径
• width、height：“内联框架"区域的宽与高
• name：框架的名字，用来识别框架
• frameBorder：设置是否显示框架的边框，值为 1 或者 0
• scrolling：当 src的指定的HTML文件在指定的区域显示不完时，滚动选项： no（不出现滚动） / yes（显示滚动） / auto（自动出现滚动条）