首页 > 编程学习 > 《网页设计基础——表格与表单》

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

发布时间:2022/9/17 1:05:33

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

一、表格基础框架;


规则:

  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

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号