《网页设计基础——表格与表单》

技术分享 4年前 (2022-09-17) 0 999+

网页设计基础——表格与表单

一、表格基础框架；

规则：

table：表示整个表格。
caption：定义表格的标题
tr：表示表格的一行。
td：表示行中的一个列,需要嵌套在 <tr> 标签内。
th：表示表头单元格. 会居中加粗。

格式：

<table>     <tr>     <th></th>     <td></td>     <td></td>     </tr> </table>

二、表格样式；

1.表格边框的合并与分离

border-collapse: collapse;		/* 边框合并 */ border-collapse: separate;		/* 边框分离 */

2.表格边框的间距大小

border-collapse: separate;		/* 边框分离 */ border-spacing: 5px 10px		/* 横向 纵向*/

3.表格标题的位置

caption-side: top; 				/* 把标题放在表格上面。*/ caption-side: bottom; 			/* 把标题放在表格下面。*/

4.表头的标识

<tr> 	<th scope="col">星期一</th>		<!-- 把<th>标识为列的表头--> 	<th scope="col">星期二</th>		<!-- 把<th>标识为列的表头--> </tr> <tr> 	<th scope="row">第一节</th>		<!-- 把<th>标识为行的表头-->	     <td>语文</td>									 </tr>

三、表单基本框架

规则：

<form>：定义供用户输入的表单标签。
<input>：输入标签。
type：定义输入类型，如文本域text、密码字段password、提交按钮submit。
name：定义表单的名称，用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。
placeholder：定义输入框中的提示信息。

格式：

<form>     <input type="text"> </form>

四、表单样式；

例一：文本域（Text Fields）

<html> 	<head> 		<title>文本域</title> 	</head> 	<body> 		<form>     		姓名：<input type="text" name="Name"><br>     		学号：<input type="text" name="Student ID"> 		</form> 	</body> </html>

网页效果：

例二：密码字段（Password）

<html> 	<head> 		<title>密码字段</title> 	</head> 	<body> 		<form>     		账号：<input type="text" name="Accound"><br>     		密码：<input type="password" name="Password">		<!-- 默认隐藏输入的内容 --> 		</form> 	</body> </html>

网页效果：

例三：单选按钮（Radio Buttons）

<html> 	<head> 		<title>表单</title> 	</head> 	<body> 		<form>     		<input type="radio" name="Sex" value="man">男<br>	<!-- 选择此项后提交的值即为value的值 -->     		<input type="radio" name="Sex" value="woman">女 		</form> 	</body> </html>

网页效果：

例四：复选框（Checkboxes）

<html> 	<head> 		<title>表单</title> 	</head> 	<body> 		<form>     		<input type="checkbox" name="Career" value="programmer">我是程序员<br>     		<input type="checkbox" name="Career" value="Superheroes">我是超级英雄 		</form> 	</body> </html>

网页效果：

例五：提交按钮(Submit)

<html> 	<head> 		<title>表单</title> 	</head> 	<body> 		<form> 			<input type="text" name="Name" placeholder="姓名"><br>		<!-- 与例一的区别就是通过 placeholder 设置了提示信息 -->     		<input type="text" name="Student ID" placeholder="学号"><br>     		<input type="submit" value="提交"> 		</form> 	</body> </html>