表格布局与表单交互

于 2024-09-30 08:00:00 发布
阅读量497 收藏 14
点赞数 14
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_81737387/article/details/142367520
版权

3.1 表格概述

table把表格所有的标签包起来


3.1.1 表格的结构

结构：由行和列组成的二维表。如下图

3.1.2 表格的基本语法

常用表格标记
标记形式说明
<table></table>表格标记
<caption></caption>表格标题标记
<th></th>表格表头标记
<tr></tr>表格的行标记
<td></td>表格的列标记

        上面的 “ 常用表格标记 ”表格中的标记，都是成对标记。

语法：

        <table>
            <caption>表格标题</caption>    
            <tr>                     
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>

              <tr>
    </table>

(1)<table>表示表格开始，</table>表示表格结束。<table></table>中包含了一个表格的所有内容。

(2)<caption>表示标题开始，<capton>表示标题结束。使用caption 标记可以给表格添加标题，该标题应位于 table 标记与 tr 标记之间的位置。

(3)<tr>表示行的开始，</>表示行结束。

(4)<th>表示表头开始，</th>表示表头结束。表头常常作为表格的第1行或者第1列，用来对表格单元格的内容的说明，表头的文字一般居中、加粗显示。

例题：设计名单表

 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		<table>  
			<caption><h2>名单表</h2></caption>	
			<tr> 				
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
	</body>
</html>

3.2 表格属性的设置

3.2.1 表格边框属性

表格边框属性说明表
边框属性说明
borde表示表格边框粗细
bordercolor表示表格边框颜色
bordercolorlight表示表格亮边框颜色（左上边）
bordercolordark表示表格暗边框颜色（右下边）

亮边框和暗边框的记忆方法：假设光源在左上方。如下图

  • (1)border属性。用于设置边框的粗细，单位是像素。
  • (2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
  • (3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效
  • (4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。

3.2.2 表格的宽度和高度属性

        width：可以设置表格的宽度，其单位可以是长度也可以是百分比。

        height：可以设置表格的高度，其单位可以是长度也可以是百分比。

        设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。（即按比例缩放）

3.2.3 表格背景颜色与表格图像属性

        设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
 <table bgcolor=" " background= " " >……</table>

  • (1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
  • (2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
  • (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

例如：设置表格边框属性。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		<h4 align="center">设置表格边框、背景</h4>
	<table align=" center" width=" 700px" height=" 150px"
border= " 15" bordercolor=" black" bordercolorlight=" #f0000" bordercolordark = " #6600ff" bgcolor=" #99cccc" >
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>所在院系</th>
	</tr>
	<tr>
		<td>1616010218</td>
		<td>李明</td>
		<td>信息学院</td>
	</tr>
	<tr>
		<td>1416020109</td>
		<td>王丹</td>
		<td>管理学院</td>
	</tr>
	</table>
<hr>
	<table align= " center" border=" 15px" bordercolor=" grey" width=" 700px" height=" 150px" background= " img/school.png" bgcolor= " #99cccc" >
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>所在院系</th>
	</tr>
	<tr>
		<td>1616010218</td>
		<td>李明</td>
		<td>信息学院</td>
	</tr>
	<tr>
		<td>1416020109</td>
		<td>王丹</td>
		<td>管理学院</td>
	</tr>
	</table>
	</body>
</html>

运行效果

        上图第二表格即设计了表格的背景颜色，又设计了背景图像，但背景图像覆盖了背景颜色。

3.2.4 表格边框样式属性

        frame属性：可以改变表格边框的样式。

        rules属性：可以改变表格内部边框的样式

 语法:
        <table frame=" " rules=" ">……内容</table>
说明:frame 和rules 属性值及说明如下表

例如：设置边框样式

运行效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		
	<table align = " center" border=" 2" bordercolor=" blue" width=" 400px" height=" 120px" frame=
	"hsides"  rules = " all" >
	<caption><b>表格边框样式定义</b></caption>
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>所在院系</th>
	</tr>
	<tr>
		<td>1616010218</td>
		<td>李明</td>
		<td>信息学院</td>
	</tr>
	<tr>
		<td>1416020109</td>
		<td>王丹</td>
		<td>管理学院</td>
	</tr>
	</table> 
	</body>
</html>

3.2.5 表格单元格间距、单元格边距属性

  • （1）cellspacing属性可以改变表格中单元格之间的间隔，使网页中的表格内容稍微松散一些。cellspacing值的单位为像素或百分比，默认值为2px。
  •         cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。cellpadding值的单位为像素或百分比。

语法
        <table cellspacing=" " cellpadding=" " >

        </table>
例如：设置单元格间距、边距。

第一个表格，cellspacing的值更大，单元格之间的距离更宽，单元格中的内容与内部边框之间的距离更窄。

第二个表格，cellpadding的值更大，单元格之间的距离更窄，单元格中的内容与内部边框之间的距离更宽。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>					
		<table  border="5px" cellspacing="5px" >  
			<caption>名单表</caption>	 
			<tr> 					
				<th>序号</th>				
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>男</th>
			</tr>
		</table>
		<br />
		cellspacing属性可以改变表格中单元格之间的间隔
		<br />
		<hr />
		<table  border="5px" cellpadding="5px" >  
			<caption>名单表</caption>	
			<tr align="center" > <!--cellpadding="10px" -->					
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center">
				<th>1</th>
				<th align="center" >张三</th>
				<th>男</th>
			</tr>
			<tr  >
				<th>1</th>
				<th>李四</th>
				<th>男</th>
			</tr>
		</table>
		<br/>
		cellpadding属性可以增加表格单元格的内容与内部边框之间的距离
	</body>
</html>

3.2.6 表格水平对齐属性

        可以通过设置表格标记的align属性，可以设定表格在水平向上的对齐方式。align属性默认为left。

语法：

        <table align=" left  | center | right ">……</table>

3.2.7 设置表格的（tr）标记行的属性

        

         tr 标记的属性用于设置表格某一行的样式。通过<tr>标记的 align属性可以设置行内容的水平对齐方式。通过t标记的 valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
        <table align =" center" >
        <tr align=" left | center | right" valign=" top l middle l bottom" >
        <td>···</td>
</tr>     

</table>

        注意：对某个单元格单独使用，遵循就近原则。

例如：设置表格行内对齐属性，效果如下。第三个表格是设置的是对整个表格的对齐

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>					
		<table  border="5px" cellspacing="5px">  
			<caption>名单表</caption>	
			<tr> 				
				<th>序号</th>				
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>男</th>
			</tr>
		</table>
		
		<table  border="5px"  width="300px" height="150px">  
			<caption>名单表</caption>	
			<tr align="center" valign="top">			
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center" valign="middle">
				<th>1</th>
				<th align="center" valign="middle">张三</th>
				<th>男</th>
			</tr>
			<tr align="left" valign="top"> <!-- 对某个单元格单独使用，遵循就近原则 -->	
				<th>1</th>
				<th>李四</th>
				<th>男</th>
			</tr>
		</table>
		
		<table  border="5px" align="center" >  
			<caption>名单表</caption>	
			<tr> 					
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<th>1</th>
				<th>张三</th>
				<th>男</th>
	</body>
</html>

3.2.8 设置单元格的属性

         td标记的属性用于设置表格单元格的显示风格

3.2.9 表格单元格跨行、跨列属性

        

3.2.9.1 单元格跨行

        使用单元格 td 标记的rowspan 属性可以设置单元格跨行合并（纵向合并）。

语法:
        <td rowspan=" 行数 ">…</td>
说明：rowspan属性可以设置单元格跨行合并。通过rowspan="n"(n是正整数)，可以设置单元格跨n行合并。

3.2.9.2 单元格跨列

        使用单元格d标记的colspan属性可以设置单元格跨列合并（横向合并）。
语法:
        <td colspan="列数" >…</td>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列合并。

 例题：设置单元格合并，效果如下图

代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置单元格跨列、跨行属性</title>
	</head>
	<body>
		<h3 align="center">设置单元格跨列、跨行属性</h3>
		<table border="1" width=" 500px" align="center" bordereolor= " #3366ff">
			<caption>专业研讨会日程安排</caption>
			<tr align=" center" >
				<td colspan="2">上午</d>
				<td colspan="2">下午</ud>
			</tr>
			<tr >
				<td>8:00-10:00</td>
				<td>10:10-12:00 </td>
				<td>14:00-16:00</td>
				<td>16: 10-18:00</td>
			</tr>
				<tr align = " cenler" >
				<td rowspan="2">学校领导讲话 </td>
				<td>大会主题报告</td>
				<td>行业企业专题报告</td>
				<td rowspan="2">总结报告</td>
			</tr>
			<tr align= " center" >
				<td>专家报告</td>
				<td>分组讨论</td>
			</tr>
			<tr align= " center" >
				<td colspan="4">全天参观人工智能实训中心</td>
			</tr>
				
			</table>
	</body>
</html>

3.3 表格嵌套

        表格嵌套可以设计比较复杂且美观的页面效果，但表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
语法:
<table>
        <tr>
                .....
        </tr>
        <tr>
                <td>          <!--单元格内嵌表格-->
                <table> ..... </table>

                </td>
        </tr>
</table>
例题：利用表格布局页面，效果如下

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套表格布局页面</title>
		<style>
			body
				{
					font-size:36px;
				}
		</style>
	</head>
	<body>
		<h4 align="center">嵌套表格布局页面</h4>
		<table width=" 660px" border=" 1" align="center" bordercolor= " #3333ff" >
			<tr>
				<td height= " 100" >
					<table width=" 100%" border=" ]" bordercolor= " red" ><tr height=" 50" align=" center" >
							<td rowspan =" 2" width =" 100" >logo</td>
							<td>广告条</td>
						</tr>
						<tr height=" 50" align=" center" >
							<td>导航</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
			<td height=" 300" >
				<table width=" 100%" border=" 1" bordercolor=" #33ff99" >
					<tr align= " center" >
					<td height="300" widt="30%">左栏目</td>
					<td height="300"width="70%">正文内容</td>
					</tr>
				</table>
			</td>
			</tr>
			<tr align="center">
				<td height="100">版权信息</td>
			</tr>
		</table>	
		</body>
</html>

3.4 表单

         表单是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成：一个是客户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输人信息，然后将这些信息提交给服务器，服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。

3.4.1 表单标记

        表单 form 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

语法:
<form method="post" action="">
        <input type="text" name=" "/>

                <textarea name=" " rows=" " cols=" " >......</textarea>
                <select name=" ">
                <option value=" " selected></option>
                <option value=" "></option>
        </select>
</form>
说明：<form>和</form>之间可包含各种表单信息输入标记。

表单标记的主要属性如下表。

 例如：表单的应用，效果图如下

解析：

        该表单的名称为form1，提交方式为post，处理程序为form_ acton. jsp，编码方式为 form_action. jsp。另外还定义了单行文本输人框，用于输人学生的姓名和课程成绩，定义了一个提交按钮和一个重置按钮。

代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>					
		<form name ="form1" method="post" action=" form_action. jsp" enctype = "text/plain" >
			<h3>输入课程成绩</h3>
		姓名:<input type=" text"/><br/>
		网页设计:<input type="text" size="15"/>
		数据结构:<input type="text"size="15"/>
		<br/><br/>
		<input type="submit"value="成绩提交"/>    <!--提交按钮-->
		<input type="reset" value="成绩重置"/>    <!--重置按钮-->
		</form>
	</body>
</html>

3.4.2 定义域和域标题

        利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果或者可创建一个子表单来处理这些元素。


语法:
<form>
        <fieldset>
                <legend align=" left | center | right ">域标题内容</legend>
        </fieldset>
</form>

        其中<legend> 标签用于定义表格（<table>）中的一个字段集（fieldset），它通常与 <fieldset> 标签一起使用，用于提供表单控件的标题或描述。
说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记；有一个对齐 align属性。

例题：域和域标题的标记的应用，运行效果如下

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义域和域标题示例</title>
	</head>
	<body>		
		<form>
		        <fieldset>
		                <legend align="center">基本信息</legend>
						姓名：<input name="name" type="text"/>
						性别：<input name="sex" type="text"/>
		        </fieldset>
				<fieldset>
				        <legend align=" center ">其他信息</legend>
						身高：<input name="height" type="text"/>
						体重：<input name="weight" type="text"/>
				</fieldset>
		</form>	
	</body>
</html>

3.4.3 表单信息输入

        

表单信息输入标记属性、取值及说明
属性取值说明
namename定义 input 元素的名称
typetext  |  password  |  checkbox  |  radio  |  image  |  submit  |  reset  |  button  |  file  |  hidden规定 input 元素的类型。text 为单行文本输人框，password 为密码输入框，checkbox为复选框，radio为单选按钮，image为图像，reset为重置按钮，button 为普通按钮，file 为文件选择框，hidden 为隐藏框

   

3.4.3.1 单行文本输入框

        单行文本输入框的 input 标记的type 属性值为text，可以实现向表单中插人一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。

语法:
        <input name=" "  type=" text "  maxlength=" "  size=" "  value=" " readonly/>

        单行文本输人框的主要属性见下表。

文本输入框标记属性、取值及说明
属性取值说明
namename定义 input 元素的名称
maxlengthnumber规定输入字段中的字符的最大长度
sizenumber_of_char定义输入字段的宽度。其值小于或等于最大长度
valuevalue规定 input 元素的默认值
readonlyreadonly规定文本框中内容只读，不能修改和编辑

3.4.3.2 密码输入框

         密码输入框中 input 标记的 type 属性值为 password，可以实现向表单中插入一个密码输人框。密码输人框中可以输人任意类型的数据，与单行文本输人框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“ ● ”所取代，这样设计可以保障用户输入的密码不被泄露。


语法:
        <input name=" " type= " password" maxlength=" " size= " " />
说明:

        密码输人框的主要属性有name，maxlenth和size，取值及说明与单行文本输人框
相同。

例题：用户输入信息，效果如下图

代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入用户信息</title>
	</head>
	<body>
		<form name="form1" method="post" action="form_action.jsp" enctype="text/plain" >
			用户名：<input name="user" type="text" value ="普通用户" maxlength="20" size="10" />
			密码：<input  name="password" type="password">	<br />
			性别：<input type="radio" name="password" >男
				 <input type="radio" name="password">女
		</form>
	</body>
</html>
  •         在此题中，插入两个单行文本输入框和两个单选按钮（3.4.3.4中会详细讲解）
  •         用户名中：name 属性指定了输入框的名称为 "user"。这个名称会在表单提交时作为键值对中的键发送到服务器。并定义最大长度为 20、显示宽度为10，若超出宽度时，输入内容向左移动，直到达到最大长度为止，此文本框的默认值为普通用户。

3.4.3.3 复选框

        含义：顾名思义，复选框就是在网页上设置多项选择。

        复选框中input 标记的 type 属性值为 checkbox，可以实现向表单中插人一个复选框。


语法：
        <input name= " " type= " checkbox" value=" " checked/>
复选框的主要属性如下表

        由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name 属性应该不同，value 属性值也可以不同。 

3.4.3.4 单选按钮

        单选按钮中 input 标记的type 属性值为 radio，可以实现向表单中插入一个单选按钮。


语法:
        <input name=" " type="radio" value="" checked/>
说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值可以不同

例题：复选框与单选按钮的应用，效果如下

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入用户信息</title>
	</head>
	<body>
		<form name="form1" method="post" action="form_action.jsp" enctype="text/plain" >
			用户名：<input name="user" type="text" value ="普通用户" maxlength="20" size="10" readonly/>
			密码：<input  name="password" type="password">	<br />
			性别：<input type="radio" name="password" >男
				 <input type="radio" name="password">女 <br />
			爱好：<input name="n1" type="checkbox" value="篮球" checked/>篮球 
				<input name="n1" type="checkbox" value="乒乓球" checked/>乒乓球  
				<input name="n1" type="checkbox" value="足球" />足球
		</form>
	</body>
</html>

代码讲解 

  •         readonly：此文本框里的值不能修改
  •         checked：预选项 （事先勾选）
  •         value：此题中设置了输入框的默认值为 "普通用户"

3.4.3.5 图像按钮

        图像按钮中 input 标记的 type 属性值为 image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过 src 属性加载图像。在前面的《网页制作的基础习题》中讲解了插入图片的两种方法。
语法:
        <input name=" " type="image" src=" " width="" height=" "/>
图像按钮主要属性如下图：

例题：在网页中使用图像按钮，效果如下

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>图像按钮应用</title>
		<style type = "text/css" >
		body {
				text-align:center;
			}
		input {
				width:150px;
				height:150px;
			}
		</style>
	</head>
	<body>
		<form>
			<h3>Play Game</h3>
			<input type= "image" name="start" src ="img/start_game.png" align="center" />
			<input type="submit" value=" 提交 "/>
			
		</form>
	</body>
</html>

素材：

3.4.3.6 提交按钮

        可以实现向表单中插入一个提交按钮，提交按设置 input 标记的 type 属性值为 submit，钮用于将表单的信息提交至服务器进行处理，
语法:
        <input name ="" type="submit" value="提交"/>
提交按钮的主要属性如下表

        在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“ 提交查询按钮 ”。所以要给 value 属性赋值。 

3.4.3.7 重置按钮

        设置 input 标记的 type 属性值为 reset，可以实现向表单中插人一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
        <input name=" " type= "reset" value=" "/>
说明: 重置按钮的属性主要有name和 value，其属性、取值及说明与提交按钮的相同。 

 3.4.3.8 普通按钮

        普通按钮中的 input 标记的 type 属性值为 button，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
        <input name="" type="button" value=" " οnclick=" "/>
普通按钮的属性如下表 

例题：三种按钮的应用，效果如下

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>三种按钮的应用</title>
		<style type="text/css">
		input{
					width:100px ;
					height:50px;	
				}
		body {	text-align:center;  }
		fieldset{
				width:440px;
				height:240px;	
			}
			
	</style>
	</head>
	<body>		
		<form>
		<fieldset>
			<legend>三种按钮的应用</legend>
			<h3>请输入用户信息:</h3>
			用户名:<input type="text" name="username" size="10"/>
			密码:<input type="password" name="password" size ="10"/><br/><br>
			&nbsp; &nbsp; <input type="submit" name="submit" value="提交"/>
			<input type="reset" name="reset" value="重置"/>
			<input type ="button" name="button" value=" 注册新用户" onclick="javascript:alert(
			'注册新用户';"/>
		</fieldset>
		</form>
	</body>
</html>

3.4.3.9 文件选择框

      设置 input 标记的 type 属性值为 fle，可以实现向表单中插人一个文件选择框
语法:
        <input name=" " type="file" value=""/>
说明:
name，定义input 标记的名称。页面上会自动添加一个文本输人框和一个“浏览······”按钮。单击“浏览···”按钮可以从“选择要加载的文件” 对话框选择某一个文件 “，然后自动将文件名称回填到文本输入框中。

3.4.3.10 隐藏框

        设置 input 标记的 type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的
语法:
        <input name=" " type=" hidden" value=" "/>

隐藏框的属性如下表

3.4.4 多行文本输入框

        textarea 标记可以向表单中插入多行文本输人框。多行文本输人框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。

语法:

        <textarea name="" rows=""  cols=""  wrap=""/>初始信息内容</textarea>

说明：多行文本输入框 textarea标记是成对标记，其主要属性如下表所示。默认情况下，当用户在文本区域中输人文本后，浏览器会将它们按照输入时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。

例题：数据征求意见表，效果如下图

 

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>多行文本框的输入应用</title>
	</head>
	<body>		
		<form>
			<h3>请填写您的表贵意见:</h3>
			 <textarea name="info" rows="4"  cols="50"  wrap="virtual"/>
			</textarea>
		</form>
	</body>
</html>

3.4.5 下拉列表框

        下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select 和 option 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size=""  multiple>
        <option value=""  selected>文字信息1</ option>
        <option value="">文字信息 2</option>

        ······
</select>
说明:select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。它们的属性、取值及说明如下表 。

例题：下拉列表框的应用，效果如下图

 

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>下拉文本框的应用</title>
	</head>
	<body>		
			<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
				<br/>
				<h3>请选择工作:</h3>
				<select name="job">
					<option value="s1" >前端</option>
					<option value="s2" selected>后端</option>
					<option value="s3">运维</option>
					<option value="s4">测试</option>
				</select>
			</form>
	</body>
</html>

3.5 综合案例——表格与表单
 

案例1——达维工作室“ 联系我们 ”子页        

 页面效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室---联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:bold;
			}
			.zi1{
				font-weight:微软雅黑;
				font-size:20px;
				font-weight:bold;
				color:#ED630A;
			}
			.zi2{
				font-family:微软雅黑;
				font-weight:bold;
				color:#F60;
				text-decoration:underline;
			}
			.zibai{
				font-family:微软雅黑;
				color:#FFF;
			}
			body{
				background-image:url(img/bj.jpg);
			}
		</style>
	</head>
	<body>
		<table width="1190" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>
				<table width="1190" border="0" align="center" cellpadding="O" cellspacing="5">
				<tr>
				  <td width="100" align="center" valign=" middle" bgcolor="#FFFFFF">
					  <img src="img/logo.jpg" alt="" width ="100" height="63"/></td>
					  <td width="100" align="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">网站首页</td>
					  <td width="100" align ="center"valign =" middle" bgcolor ="#FFFFFF" class="zi1">关于我们</td>
					  <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF"  class="zi1">团队合作</td>
					  <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
					  <td width="100" align=" center" valign =" middle" bgcolor =" #FFFFFF" class="zi1">设计理念</td>
					  <td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
					  <td width="100" align ="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">联系我们</td>
					  </tr>
				 </table>
				</td>
			 </tr>
			 <tr>
				 <td>
			<table width=" 100%"border="0" cellspacing="20" cellpadding="0">
				<tr>
				<td height="318">&nbsp;</td>
				<td widih="280" valign="top">
					<table width="100%" border="0" cellspacing="0" cellpadding="20">
						<tr>
							<td height="30" align="center" bgcolor="aaFFFFF" class="zi1">联系我们</td>
						</tr>
						<tr>
							<td height="196" bgcolor="#FFAF03">
							<p class="zibai">地址：XX省XX市XXXXXXXX<br/>
							电话：0750-XXXXXX<br/>
							传真:0750-XXXXXX<br />
							QQ:12345678<br />
							电子邮箱：<br />
							123@163.com<br/>
							工作室网站：<br/>
							www.XXXX.com</p >
							</td>
							</tr>
					</table>
				</td>
				<td width="280" valign="top">
					<table width="100%" border="0" cellspacing ="0" cellpadding="20">
						<tr>
						<td height="30" align="center" bgcolor="#66E000" class="zil">关于我们</td>
						</tr>
						<tr>
						<td height="278" valign="top" bgcolor="#FC880D">
							<p class="zibai">达维工作室是专业事互联网相关开发的公司。<br/>
						专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
						达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……</p>
						<p class="zibai">&nbsp;</p>
						<p class="zibai chu">更多&gt;&gt;</p>
						</td>
						</tr>
					</table>
				</td>
				<td width="280"><!---->
					  <table width =" 100%" border="0" cellspacing ="0" cellpadding ="20">
					<tr>
					  <td height="30" align="center" bgcolor="#0888FF" class="zil">团队合作</td>
					</tr>
					<tr>
					<td height="332" valign="top" bgcolor="#66A00E">
						<p class="zi2">我们的团队:</p>
					<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需关设计师创意的思维模式，提供最适合的设计方案。</p>
					<p class="zi2">我们的承诺：</p>
					<p class=“zibai">本工作室设计与制作的网站均属原创、不套用网上的任何接版根据每个公司特点，设计出属于客户……</p >
					<p class="zibai">&nbsp;</p>
					<p class ="zibai chu">更多 &gt;&gt;</p>
					</td>
					</tr>
				</table>
					</td>
					</tr>
			</table>
				</td>
				</tr>
		</table>
	</body>
</html>

 素材：

网站首页关于我们团队合作相关作品设计理念人物介绍联系我们
联系我们

地址：XX省XX市XXXXXXXX
电话：0750-XXXXXX
传真:0750-XXXXXX
QQ:12345678
电子邮箱：
123@163.com
工作室网站：
www.XXXX.com
关于我们

达维工作室是专业事互联网相关开发的公司。
专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。
达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……

更多>>
团队合作

我们的团队:

成员都具有多年的实际设计工作经验，满足客户的国际化需关设计师创意的思维模式，提供最适合的设计方案。

我们的承诺：

本工作室设计与制作的网站均属原创、不套用网上的任何接版根据每个公司特点，设计出属于客户……

更多 >>

背景：

案例2——用户注册信息

页面效果：

 

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册信息</title>
		<style type="text/css">
		fieldset{
			width:700px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="forml" id="forml">
		<fieldset>
		<legend>用户注册信息</legend>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td width="200" align="right">用户名：</td>
		<td><input type="text" name="textfield" id="textfield"/></td>
	</tr>
	<tr>
		<td width="200" align="right">密码：</td>
		<td><input type="password" name="textfield2" id="textfield2" /></td>
	</tr>
	<tr>
		<td width="200" align="right">确认密码：</td>
		<td><input type="password" name="textfield3" id="textfield3"/></td>
		</tr>
	<tr>
		<td width="200" align="right">性别：</td>
		<td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
		男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
		<input type="radio" name="radio" id="radio2" value="radio2"/>
		女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/></td>
	</tr>
	<tr>
	<td width="200" align="right">出生年月：</td>
	<td><input name="textfield4" type="text" id="textfield4" size="12"/>年
	<select name="select" id="select">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	</select>
		月</td>
	</tr>
	<tr>
	<td width="200" align="right">业余爱好：</td>
	<td><input type="checkbox" name="checkbox" id="checkbox"/>看书
		<input type="checkbox" name="checkbox2" id="checkbox2"/>上网
		<input type="checkbox" name="checkbox3" id="checkbox3"/>打球
	</td>
	</tr>
	<tr>
		<td width="200" align="right" >相片：</td>
		<td height="25"><input type="file" name="fileField" id="fileField"/></td>
	</tr>
	<tr>
		<td width="200" align="right">意见或建议；</td>
		<td>
		<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
		<input type="submit" name="button" id="button" value="提交"/>
		<input type="reset" name="button2" id="button2" value="重置"/>
		</td>
	</tr>
	</table>
	</fieldset>
	</form>
	</body>
</html>

伏飞而行
关注
表格布局与注册表单1
08-08
【表格布局与注册表单1】的知识点主要集中在HTML网页设计和前端开发上，特别是涉及到表格布局、表单元素以及用户交互的设计。以下是对这些知识点的详细解释： 1. **表格布局**：在HTML中，`<table>`标签用于创建...
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
本文将深入探讨如何利用Element UI的Form表单组件构建一个高拓展性的表格布局组件。 首先，Element UI的Form组件提供了强大的表单处理能力，它支持各种表单元素如Input、Select、Checkbox、Radio等，并且具有表单...
按钮 表格 表单验证
12-05
在网页设计和开发中，按钮、表格和表单验证是三个关键元素，它们共同构建了用户与网站交互的基础。下面将详细阐述这三个方面的知识。 首先，我们来看“按钮”。按钮在网页中扮演着触发动作的角色，它允许用户执行...
layui的布局和表格的渲染以及动态生成表格的方法
10-16
Layui是一款轻量级的前端UI框架，它提供了丰富的组件，其中布局和表格是两个非常实用的功能。这篇文章主要讲述了如何使用Layui进行页面布局和表格渲染，并且演示了如何动态生成表格。 1. 页面布局： Layui的布局...
网页设计与制作教程(HTMLCSSJavaScript)第2版第3章网页布局与交互.pptx
11-12
本资源主要讲解网页设计与制作中的网页布局与交互相关知识点，涵盖了表格的基本概念、表格的修饰、表格的跨行跨列、表单的工作机制、表单标签、表单元素等内容。 1. 表格的基本概念： 表格是网页布局中的重要元素，...
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域：页面设置和表单验证。在Web开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的...
vue前端表单插件支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理
06-24
在处理复杂数据模型时，表格布局能让数据更直观，用户可以快速地浏览和修改多条记录。表格功能通常包括排序、筛选、分页等，以满足不同场景下的需求。此外，表格内的单元格也可以自定义编辑控件，如日期选择器、下拉...
动态表单：VUE动态表单
08-13
7. **拖拽布局**：为了实现拖拽设计，可以引入第三方库如Vue.Draggable，它可以与Vue的组件系统很好地整合，让用户可以通过拖放操作调整表单组件的布局。 8. **状态管理**：对于复杂项目，可能需要使用Vuex这样的...
JQUERY输入提醒表格表单特效代码下载.rar
07-05
标签 "JS特效-表单按钮" 指出这个代码可能不仅限于表单的输入提示，还可能包含了一些与表单按钮相关的JavaScript特效。这可能包括按钮的悬停效果、点击反馈、加载指示器，或者是按钮触发的交互式功能，如提交表单后...
交互式表格2020：交互式表格练习
02-24
- 针对不同设备（如手机、平板、桌面）优化表格布局，确保在任何屏幕尺寸下都能良好显示。 - 使用媒体查询(`@media`)和CSS Flexbox或Grid布局实现响应式表格。 6. **现代Web框架的应用** - 如React、Vue或...
Android 表格控件-动态实现表格效果（内容、样式可扩展）
12-03
在Android开发中，创建动态表格效果是常见的需求，特别是在展示数据或者进行用户交互时。本教程将探讨如何利用Android的自定义View或者现有的布局控件，如LinearLayout、TableLayout、GridLayout等，来实现一个可...
表单表格 （歪瑞Funny）
11-11
在IT行业中，表单表格是网页开发中不可或缺的一部分，它们用于收集、展示和处理用户数据。"歪瑞Funny"可能是项目或课程的名字，它显然与HTML和JavaScript有关，这两个技术是构建交互式网页的关键工具。下面我们将...
html基础教程 表格与表单 图像和声音 框架 CSS.ppt
07-07
而标签则包含所有用户可见的内容，如文字、图像、表格、表单等。 表格在HTML中通过标签来创建，可以使用定义行，定义表头单元格，定义普通数据单元格。表单则是通过标签构建，常用元素有（输入框）、（下拉列表）、...
CSS3每月计划表格布局特效.zip
10-10
【标题】"CSS3每月计划表格布局特效"是基于CSS3技术实现的一种创新的网页布局方式，主要用于构建具有视觉吸引力的、互动性高的月份计划表。这种特效代码可以帮助开发者快速创建出灵活多变且功能丰富的日历视图，用于...
注册与表格显示.rar
最新发布
06-13
在IT行业中，"注册与表格显示"通常涉及到前端开发中的...总结，"注册与表格显示"是Web应用开发中的核心部分，涵盖了用户交互、数据验证、前后端通信、数据可视化等多个技术领域，对于构建高效、安全的Web系统至关重要。
BootStrap智能表单demo示例详解
11-23
总结，Bootstrap智能表单不仅提供了美观的界面，还具备强大的功能，能够帮助开发者快速构建交互性强、响应式好的表单应用。结合其他前端技术和库，可以进一步提升表单的用户体验和功能多样性。在实际开发中，灵活...
Axure ant design pro后台模板可交互
01-21
这个后台模板包含的文件“ant design4.40-web组件库”很可能是Ant Design Pro的最新版本4.40的Web组件集合，其中包括按钮、表单、表格、导航、模态框等常用元素，方便设计师直接应用到Axure项目中。而“ant design ...
eform_表单_
09-29
在IT行业中，表单设计与生成是一个至关重要的领域，它涉及到用户交互、数据收集和管理。"eform_表单_"这个主题显然聚焦于自定义表单的设计与实现，这通常是为了满足特定业务需求，提供个性化用户体验，或者解决标准...
Echarts世界地图和网页表格数据交互联动.pdf
11-27
- `<div class="map-table">`包含表格和表单，用于输入查询条件和显示结果。 - `<form>`元素内包含两个`<input>`字段，一个用于用户输入国家名称，另一个用于查询按钮，点击按钮触发`find_res()`函数。 - 表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值