1

《网页设计基础——表格与表单》 - 温稚生

 2 years ago
source link: https://www.cnblogs.com/Dustspirt/p/16701765.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

一、表格基础框架；

规则：

  1. table：表示整个表格。
  2. caption：定义表格的标题
  3. tr：表示表格的一行。
  4. td：表示行中的一个列,需要嵌套在 <tr> 标签内。
  5. 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>

三、表单基本框架

规则：

  1. <form>：定义供用户输入的表单标签。
  2. <input>：输入标签。
  3. type：定义输入类型，如文本域text、密码字段password、提交按钮submit。
  4. name：定义表单的名称，用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。
  5. 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>

网页效果：

image.png

例二：密码字段（Password）

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

网页效果：

image.png

例三：单选按钮（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>

网页效果：

image.png

例四：复选框（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>

网页效果：

image.png

例五：提交按钮(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>

网页效果：

image.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK