HTML复习笔记—表格与表单

最新推荐文章于 2021-06-27 21:47:18 发布

林戊

最新推荐文章于 2021-06-27 21:47:18 发布

阅读量478

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/LiMaoLin1999/article/details/103282085

版权

HTML学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表格与表单

1 制作基本的表格

表格的基本架构—包括表格（table），单元格（cell），列（column）,行（row）,通常行代表横行，列代表直列。
在HTML中加入表格:设置表格——设置行的数目——设置列的数目；

设置表格标记语法为:

< table border="1">....< /table>

border属性用来设置是否显示表格边框线。

设置行的数目

< tr>...< /tr>

作用是产生一行，此标记必须在< table >标记内。

设置列的数目

< td >...< /td>

< td>标记的作用是在一行内产生一列，此标记写在< tr>…< /tr>标记内。
设置表格的标题标记语法：

< caption >...< /caption>

此标记的作用是为表格加入标题，放在< table>之后。
设置列标题标记语法：

< th>...< /th>

< th>与< td>的功能是相同的，用< th>标记的文字会以粗体显示，通常当作表格第一行的标题，用法是把表格第一行< td>换成< th>。

2 表格编辑技巧

合并单元格
合并左右列：属性是colspan,用法是

< td  colspan="2">

合并上下行:属性是rowspan，设置值为准备合并的行数，用法：

< td  rowspan="3">

合并的例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table border="1"><!--别忘了table-->
<tr>
<td rowspan="3">合并上下行</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</body>
</html>

遇到空白单元格时的处理当单元格是空白时，单元格的边框会消失，此时需要在空白单元格中加入一个“&nbsp”就能显示正常了。
利用表格组合图片例子如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
   table{border-collapse:collapse;}
   td{padding:0}
   img{display:block;}   
</style>
</head>

<body>
   <table>
      <tr>
	     <td>
		    <img src="../../qq图片/一寸.jpg">
		 </td>
		 <td>
		    <img src="../../qq图片/一寸.jpg">
		 </td>
	  </tr>
	  <tr>
	     <td>
		    <img src="../../qq图片/一寸.jpg">
		 </td>
		 <td>
		    <img src="../../qq图片/一寸.jpg">
		 </td>
	  </tr>
   
   </table>
</body>
</html>

3 表单

表单由许多的组件组成，应用于网页搜索，各种申请表单，在线投票，在线购物，

4 创建表单

表单可以制作出各种各样的组件，大致分为4大类：输入组件，列表组件，选择组件，按钮组件。
**表单的基本架构：**例如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
    <form method="post" action=""><!--表单开始-->
   账号:<input type="text" name="user_name"/><!--文字域-->
   <br/>
   密码:<input type="text" name="password"/><!--文字域-->
   <br/>
   <input type="submit" value="提交"/><!--提交按钮-->
   <input type="reset" value="取消"/><!--取消按钮-->
   </form><!--表单结束-->
</body>
</html>

< form/ >标记
< form >…< /form >就像是一个容器，可以放各种组件
语法：

<form method="post" action="abc.asp">

method属性用于设置发送数据的方式，设置值有post和get两种。
action用来指出发送的目的地。

输入组件主要让用户输入数据，常用的由文本框（text），多行文本框（textarea），密码域（password）
语法如下：

<input type="text" name="user_name" value="guest" size="10" maxlength="10"/>

type=“text”——输入方式为text，能产生一个单行的文本框。
name=“user_name”——文本框的名称。
value=“guest”——文本框的默认值，如果省略此属性，则文本框是空白的，此处文本框中会出现guest，用户可以修改。
size=“10”——文本框的长度。
maxlength=“10”——限制文本框字数，不写的话默认为20。
多行文本框textarea
语法：

<textarea name="lkl" cols="20" rows="4" wrap="virtual">111222333</textarea>

常用的属性：name=“lkl”，文本框的名称，自行设置。
cols="20“ 文本框的宽度。
rows=“4” 文本框的行数。
wrap=“virtual” 设置文本框的文字提交表单后是否换行，设置值有hard（超过宽度时自动换行）和soft（不换行）没有设置的话，就默认不换行。
密码域password
语法：

<input type="password" name="lm" size="20">

日期域date
语法：

<input type="date" name="23">

数字域number
让用户只能以上下键来选择数字，语法:

<input type="number" name="num" value="5" min="3" max="20"/>

选择组件有两种，单选按钮（radio），复选框（checkbox）。

radio组件旁边必须加文字，才知道此组件的意思。

文字<input type="radio" name="rad" value="女" checked/>

范例：

<body>
   <form>
      <input type="radio" name="1" value="男生" checked="checked"/>男生
	  <input type="radio" name="1" value="女生" />女生
   </form>
</body>

name属性相同的radio组件会被视作同一组radio组件，同一组中只能有一个radio被选择。
复选框（checkbox）
范例：

<body>
   <form>
      <input type="checkbox" name="1" value="男生" checked="checked"/>男生<br/>
	  <input type="checkbox" name="1" value="女生" />女生<br/>
	  <input type="checkbox" name="1" value="电影" />电影<br/>
	  <input type="checkbox" name="1" value="运动" />运动<br/>
	  <input type="checkbox" name="1" value="唱歌" />唱歌<br/>
   </form>
</body>

checked：设置checkbox组件为已经选择。
按钮组件
范例：

 <body>
   <form method="post" action=" ">
      请输入账号和密码:<br/>
      账号：<input type="text" name="user" size="20"/><br />
	  密码：<input type="password" name="pass" size="20" /><br/>
	  <input type="submit" value="提交"/>
	  <input type="reset" value="重填"/>
	  <input type="button" value="回去"/>
   </form>
</body>

林戊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML复习笔记—表格与表单

表格与表单1 制作基本的表格表格的基本架构—包括表格（table），单元格（cell），列（column）,行（row）,通常行代表横行，列代表直列。在HTML中加入表格:设置表格——设置行的数目——设置列的数目；设置表格标记语法为:< table border="1">....< /table>border属性用来设置是否显示表格边框线。设置行的...
复制链接

扫一扫