小白入门之HTML--第二章 表格和表单

最新推荐文章于 2023-03-07 16:24:31 发布
最新推荐文章于 2023-03-07 16:24:31 发布
阅读量1k 收藏 9
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshishq1210/article/details/95044698
版权

1.本章面试题

1.1 表格的基本标签有哪些

1.2 常用的表单元素有哪些

2.知识点

2.1 上一章内容回顾

​ 上一章我们学习了HTML语言的概念和一些常用的标签，包括标题标签，段落标签，换行标签，格式化标签，字体形状标签，字体标签，图像标签，超链接标签，网页文档结构标签，视频标签，音频标签等常用标签。

2.2 本章我们要学习网页中的表格和表单

3.具体内容

3.1 表格的基本结构

​ 在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形式，如财务数据、调查数据、事件日历、公交车时刻表、电视节目表等。在大多数情况下，这类信息都由列标题或行标题加上数据本身构成。如下是一个表格的基本结构:

​

​ 图3-1 表格示意图

​ 一个最基本的HTML表格常用的标记如表3-1所示，它们是创建表格最常用的标记，在一起配合使用就可以生成最简单的表格了。

3.2 表格的基本语法

标记说明
<table>table是表格的最外层标记，一个表格从<table>开始到</table>结束
<tr>网页的表格是按照行画的，每出现一对<tr></tr> 表示一行。<tr>的上一级父标记是<table>
<td>td元素表示表格中的数据，在表格中用于包含单元格实际的内容，<td>到</td> 表示行中的一个单元格。<td> 和 </td> 中的内容就是单元格的内容。<td> 的上一级父标记是<tr>。
<th>th和td表示的都是单元格，但th元素中的内容默认将居中并以粗体显示。th 经常用于表头的单元格。
<caption>在<caption>标记中的文字就作为表格标题，通常会居中显示在表格上方。<caption>标记必须直接放置到<table>标记之后，每个表格只能设置一个标题。

​ 表3-1 表格的基本标签

<table>                                   <!--表格开始-->
  <caption>...</caption>                 <!--表格标题-->
  <tr>                                    <!--行开始-->
   <th>...</th>                           <!--单元格，内容默认居中加粗-->
  </tr>                                   <!--行结束-->
  <tr>                                 <!--行开始-->
    <td>…</td>                          <!--单元格-->
  </tr>                                <!--行结束-->
</table>                               <!--表格结束-->
<!DOCTYPE html>
<html>
<head>
    <title>基本表格</title>
</head>
<body>
<table>
    <caption>学生信息表</caption>
    <tr>    
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>201107235</td>
        <td>张明</td>
        <td>男</td>
        <td>19</td>
    </tr>
    <tr>
        <td>201107421</td>
        <td>夏静</td>
        <td>女</td>
        <td>20</td>
    </tr>
    <tr>
        <td>201107616</td>
        <td>刘洋</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>201107311</td>
        <td>李明浩</td>
        <td>男</td>
        <td>21</td>
    </tr>
</table>
</body>
</html>
​

3.3 表格边框属性

​ border属性，表示是否显示表格的边框，只使用值 "1" 或 "0 "；如果修改border属性值为"0"，表示无边框，和默认效果一样。

​ 基本语法：

<table border="属性值">
<!DOCTYPE html>
<html>
<head>
    <title>带边框的表格</title>
</head>
<body>
<table border="1" >
    <caption>课程表</caption>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>地理</td>
        <td>历史</td>
        <td>计算机</td>
        </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
</table>
</body>
</html>
​

3.4 在单元格中显示图片

​ 对于HTML表格，还可以在其单元格中添加图像。将图片放到单元格中，可以将图片在网页上排列整齐。

<!DOCTYPE html>
<html>
<head>
    <title>带图片的表格</title>
</head>
<body>
    <table>
        <caption>卡通头像</caption>
        <tr> 
            <td><img src="images/1.jpg" width="100" height="100"/></td> 
            <td><img src="images/2.jpg" width="100" height="100"/></td> 
            <td><img src="images/3.jpg" width="100" height="100"/></td>
        </tr>
        <tr> 
            <td><img src="images/4.jpg" width="100" height="100"/></td> 
            <td><img src="images/5.jpg" width="100" height="100"/></td> 
            <td><img src="images/6.jpg" width="100" height="100"/></td>
        </tr>
    </table>
</body>
</html>

3.5 合并单元格

​ 可以通过colspan 和rowspan 属性让<th>或<td> 跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。这样我们可以创建更多不规则的表格。

3.5.1 列合并

​ 如果要对表格使用列合并，也就是让同一行上的不同列上的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最左侧的那个单元格，并加上colspan属性，在同一行中的其它单元格的标记要删除掉。

​ 基本语法:

<td colspan="#"> 
<!DOCTYPE html>
<html>
   <head>
    <title>列合并表格</title>
   </head>
   <body>
    <table border="1">
        <caption>列合并</caption>
        <tr>
            <td> A00</td> 
            <td colspan="2">A01A02</td> 
            <td>A03</td>
        </tr>
        <tr>
            <td>B10</td> 
            <td>B11</td>
            <td>B12</td>
            <td>B13</td>
        </tr>
        <tr>
            <td>C20</td>
            <td>C21</td>
            <td>C22</td>
            <td>C23</td>
         </tr>
    </table>
   </body>
</html>

3.5.2 行合并

​ 如果要对表格使用行合并，也就是让同一列上的不同行上的几个单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最上面的那个单元格，并加上rowspan属性，然后将其它行中对应的其它单元格的标记删除掉。

​ 基本语法：

<td rowspan="#">
<!DOCTYPE html>
<html>
   <head>
      <title>行合并表格</title>
   </head>
   <body>
      <table border="1">
         <caption>行合并</caption>
         <tr>
            <td rowspan="2"> A00B10</td> 
            <td>A01</td>
            <td>A02</td> 
            <td>A03</td>
         </tr>
         <tr>               
             <td>B11</td>
             <td>B12</td>
             <td>B13</td>
         </tr>
         <tr>
            <td>C20</td>
            <td>C21</td>
            <td>C22</td>
            <td>C23</td>
         </tr>
      </table>
   </body>
</html>

3.5.3 行列合并

<!DOCTYPE html>
<html>
   <head>
      <title>行列合并表格</title>
   </head>
   <body>
      <table border="1">
         <caption>行列合并</caption>
        <tr>
            <td> A00</td> 
            <td>A01</td>
            <td>A02</td> 
            <td>A03</td>
         </tr>
         <tr>   
             <td>B10</td>            
             <td>B11</td>
             <td rowspan="2" colspan="2">B12B13<br/>C22C23</td>             
         </tr>
         <tr>
             <td>C20</td>
             <td>C21</td>
         </tr>
     </table>
   </body>
</html>

3.6 嵌套表格

​ 嵌套表格就是在一个大的表格中，再嵌进去一个或几个小的表格。即插入到表格单元格中的表格。如果用一个表格布局页面，并希望用另一个表格组织信息，则可以插入一个嵌套表格。

<!DOCTYPE HTML>
<html>
<head>
    <title>表格的嵌套</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>1</td>
            <td rowspan=2>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">10<br/>
                <table border=1>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
            <td colspan="2">15</td>
        </tr>
    </table>
</body>
</html>

3.7 表格按行分组显示<thead>/<tfoot>/<tbody>

​ <thead>、<tfoot> 以及<tbody>元素使你有能力对表格中的行进行分组。 <tfoot>标记定义表格的页脚（脚注或表注）。该标记用于组合 HTML 表格中的表注内容。<tfoot>元素应该与<thead>和<tbody>元素结合起来使用。<thead> 元素用于对 HTML 表格中的表头内容进行分组，而tbody元素用于对 HTML 表格中的主体内容进行分组。 在默认情况下这些元素不会影响到表格的布局。

<!DOCTYPE HTML>
<html>
<head>
    <title>表格的分组</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>月份</th>
                <th>收入（￥）</th>
            </tr>
         </thead>
         <tfoot>
            <tr>
                <td>总计</td>
                <td>5800</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>一月</td>
                <td>1800</td>
            </tr>
            <tr>
                <td>二月</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>三月</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

3.8 表单的使用

​ 表单在网页中起着重要作用，它是与用户交互信息的主要手段。比如我们常用的用户注册、在线联系、在线调查表等都是表单的具体应用形式。

​ 在HTML中，只要在需要使用表单的地方插入成对的标记<form>和</form>，就可以很简单地完成表单的插入。

​ 基本语法：

<form  name=" "  method=" "  action=" " >
   ……
   表单元素（如文本框、单选按钮、复选框、列表框、文本区域等）
   ……
</form>
​

​ 语法说明：

  • name：该属性表示表单的名称。

  • method：该属性用来定义提交信息的方式，取值为post或get，默认为get。

  • action：该属性用来指定处理表单数据的程序文件所在的位置，当单击提交按钮后，就将表单信息提交给该文件进行处理。

    如下是一个建立表单的基本语句：

    <form name="form1"  method="post"  action=" login.html" >
</form>

3.9 表单基本元素

​ 一个表单重要的两个组成部分表单域和表单按钮。表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮包括提交按钮、复位按钮和一般按钮。

3.9.1 <input>元素

​ 该标记可以在表单中定义单行文本框、单选按钮、复选框等表单元素。

​ 基本语法：

<input name=" " type=" " />

如下是<input>元素的属性说明：

属性功能
type插入表单的元素类型，具体取值如表3-3所示
name表单元素的名称
size单行文本框的长度，取值为数字，表示多少个字符长
maxlength单行文本框可以输入的最大字符数，取值为数字，表示多少个字符，当大于size的属性值时，用户可以移动光标来查看整个输入的内容。
value对于单行文本框，表示输入文本框的默认值，可选属性对于单选按钮或复选框，则指定单选按钮被选中后传送到服务器的实际值，必选属性。对于按钮，则指定按钮表面上的文本，可选。
checked若被加入，则默认选中

​ 表3-2 input元素的基本属性

属性值说明
text表示单行文本框
password表示密码框输入的字符以"*"或"·"显示
radio单选按钮
checkbox表示复选框
submit表示提交按钮
reset表示重置按钮
button表示创建一个按钮，该按钮的具体功能，需要另外编程
image表示图像域，此时input标记还有一个重要属性：src，用来指定图像域的来源
file表示文件域
hidden隐藏文本框域，类似于text，但不可见，常用来传递信息。
  

3.9.2 文本框和密码框

​ 文本框和密码框是表单设计里面最常用的两个表单元素，比如登录、注册等页面设计都会用到这两个表单元素。

​ 基本语法：

<input type="类型" name="名称" readonly="只读" size="宽度" maxlength="可输入字符数" value=”默认值”/>
<!DOCTYPE HTML>
<html>
<head>
    <title>文本框和密码框</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="uname" value="Mary"/>
        <br /><br />
        密码：<input type="password" name="upass" />
        <br /><br />
        年龄:<input type="text" name="uage" size="3" maxlength="3"/>
    </form>
</body>
</html>
​

3.9.3 按钮

​ 在表单中常用的按钮有四种，分别是提交按钮、重置按钮、普通按钮和图片按钮。

  • 提交按钮的type属性值为submit。

  • 重置按钮就是让所有表单数据都还原到初始值。

  • 普通按钮就是能生成一个按钮的形状，但单击按钮不会有任何操作，需要配合相关代码支持功能操作。

  • 图片按钮当<input>标记的属性值为image时，就成为一个图像域，图像域相当于一个图片样式的提交按钮。

基本语法：

<input type="image" src="图片的位置" width="图片宽度" height="图片的高度" />

创建提交按钮，重置按钮和普通按钮：

<!DOCTYPE HTML>
<html>
<head>
    <title>按钮</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="uname" value="Mary"/>
        <br /><br />
        密码：<input type="password" name="upass" />
        <br /><br />
        年龄:<input type="text" name="uage" size="3" maxlength="3"/>
        <br /><br />
        <input type="submit" value="提交按钮" />
        <input type="reset" value="重置按钮" />
        <input type="button" value="普通按钮" onClick="window.alert('请输入用户信息')"/>
    </form>
</body>
</html>
​

创建图片按钮：

<!DOCTYPE HTML>
<html>
<head>
    <title>图片按钮</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="uname" />
        <br /><br />
        密码：<input type="password" name="upass" />
        <br /><br />
        年龄:<input type="text" name="uage" size="3" maxlength="3"/>
        <br /><br />
        <input type="image" src="images/submit.jpg" width="120"/>
    </form>
</body>
</html>
​

3.9.4 单选按钮

​ 单选按钮(radio button)是较小的圆形按钮，它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type特性设置为radio，就可以创建单选按钮。

​ 在定义选项时，必须保证同一组的单选框的name属性值一样，这样才能在一组选项中作出一个选择。

<!DOCTYPE html>
<html>
<head>
    <title>单选按钮</title>
</head>
<body>
    <form>
        <br /><br />
        性别<br /><br />
        <input type="radio" name="radio1" value="男生" checked="checked"/>男生<br /><br />
        <input type="radio" name="radio1" value="女生" />女生
    </form>
</body>
</html>

 

3.9.5 复选框

​ 复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。

<!DOCTYPE html>
<html>
<head>
    <title>复选框</title>
</head>
<body>
    <form>
        <br /><br />
        个人爱好<br/><br />
        <input type="checkbox" name="checkgroup" value="跳舞" />跳舞<br /><br />
        <input type="checkbox" name=" checkgroup " value="唱歌" />唱歌<br /><br />
        <input type="checkbox" name=" checkgroup " value="羽毛球" />羽毛球<br /><br />
        <input type="checkbox" name=" checkgroup " value="乒乓球" />乒乓球<br /><br />
    </form>
</body>
</html>

 

3.9.6 文件域

​ 文件域类型用于文件上传。在设计网站时，有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便，可以让用户自行选择要上传的文件。

<!DOCTYPE html>
<html>
<head>
    <title>文件域</title>
</head>
<body>
    <form>
        <input type="file" name="user_file" />
    </form>
</body>
</html>

 

3.9.7 hidden类型

​ hidden类型可以定义一个隐藏的表单控件。在浏览器中，这个隐藏项用户是看不到的。通常情况下，设计者可以利用隐藏表单控件存储一些数据，可以当作一个页面变量。

​ 代码：

<input type="hidden" name="hiddenText" value="1000"  />

3.9.8 多行文本框<textarea>

<textarea>和</textarea>标记就用于定义一个多行文本域，常用于需要输入大量文字的地方，如留言、自我介绍等。由<textarea>创建的文本域对输入的文本长度没有任何限制，该区域在垂直方向和水平方向上都可以有滚动条。

​ 基本语法：

<textarea rows="行数" cols="列数">
这是多行文字框
</textarea>
<!DOCTYPE html>
<html>
<head>
    <title>多行文字框</title>
</head>
<body>
    <form>
        个人简介：
        <textarea rows="10" cols="30" name="txtarea">
        简介：
        </textarea>
    </form>
</body> 
</html>

3.9.9 列表 <select> <option> <datalist>

3.9.1 select标签

​ <select>标记是和<option>标记配合使用的，一个<option>标记就是下拉菜单中的一项，<select>标记和<option>标记的属性分别如下表所示。

 

示例代码：

<select>
<option value="列表项的值1">列表项的说明1</option>
            ……
<option value="列表项的值n">列表项的说明n</option>
</select>
<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
</head>
<body>
    <form>
        select：
        <select>
            <option value="C++">C++</option>
            <option value="Java">Java</option>
            <option value="Html">Html</option>
        </select>
    </form>
</body> 
</html>

3.9.2 <datalist> 标签

​ < datalist>虽然也可以生成列表，但是不能独立使用这个表单。<datalist>标记必须和一个可输入文本框类型一起配合使用。

​ 基本语法：

    <input type="text" list="要绑定的datalist的id" name="名称" />
    <datalist id=列表id >
    <option label="列表项的说明1 " value="列表项的值1" />
            ……
    <option label="列表项的说明n" value="列表项的值n" />
    </datalist>
<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
</head>
<body>
    <form>
        Webpage: <input type="url" list="url_list" name="link" />
        <datalist id="url_list">
            <option label="W3School" value="http://www.W3School.com.cn" />
            <option label="Google" value="http://www.google.com" />
            <option label="Microsoft" value="http://www.microsoft.com" />
        </datalist>
    </form>
</body> 
</html>

3.9.10 <input> 标签高级属性

​ HTML5中对<input>定义了很多全新的表单输入类型，这些新的表单类型大大简化了程序员的编程复杂度，提供了很好的控制和便捷的验证方法。

3.9.10.1 url类型

​ 定义url类型的输入表单，是在input标记中设置type属性值为url。当提交数据时，该表单会对输入的路径值自动进行验证，输入的是不合法路径时会有提示语句。

​ 基本语法：

<input type="url" name="名称"/>


<!DOCTYPE html>
<html>
<head>
	<title>url</title>
</head>
<body>
	<form>
		请输入个人主页地址:
  		<input type="url" name="user_url" />
  		<input type="submit"/>
	</form>
</body>
</html>

3.9.10.2 email类型

​ 定义email类型的输入表单，是在input标记中设置type属性值为email。当提交数据时，该表单会对输入的邮箱地址值自动进行验证，如果用户输入不符合格式就会给出提示。

​ 基本语法：

<input type="email" name="名称" />	


<!DOCTYPE html>
<html>
<head>
	<title>email</title>
</head>
<body>
	<form>
		请输入邮箱地址：
		<input type="email" name="Uemail" /> 
		<input type="submit" value="提交"/>
	</form>
</body>
</html

3.9.10.3 日期和时间

​ HTML5之前日期和时间是需要另外编程插入能选择日期和时间的控件，现在HTML5提供了多种新的日期和时间输入表单，用户可以方便的通过鼠标选择日期和时间。

​ 基本语法：

<input type="时间日期关键字" name="名称" />	


<!DOCTYPE html>
<html>
  <head>
    	<title>分类展示不同形式的选择日期</title>
  </head>
 <body>
 	<form>
  		日期与时间类型输入框：<br/><br/>
   		<input name="txtDate_1" type="date"/><br/><br/>
   		<input name="txtDate_2" type="time"><br/><br/>
  
		月份与星期类型输入框：<br/><br/>
   		<input name="txtDate_3" type="month"/><br/><br/>
   		<input name="txtDate_4" type="week"/><br/><br/>

		日期时间型输入框：<br/><br/>
   		<input name="txtDate_5" type="datetime"/><br/><br/>
   		<input name="txtDate_6" type="datetime-local"/><br/><br/>
   	</form>
  </body>
</html>

3.9.10.4 数字类型

​ 如果要在HTML5中输入整数，有两种数字类型可以实现number和range，这两种类型的属性都是一样的，唯一不同之处在于页面中的展示形式。

​ 基本语法：

<input type="range或者number" name="名称" min="最小值" max="最大值" step="步长" value="初始值" />


<!DOCTYPE html>
<html>
<head>
	<title>数字表单</title>
</head>
<body>
	<form>
		输入0—100之间的数字：
		<input type="range" name="inputNum3" min="1" max="100" value="30"/>
		<br/><br/>
		输入10-50之间的数字(步长为2)：
		<input type="number" name="inputNum2" min="10" max="50" step="2" />
	</form>
</body>
</html>

3.9.10.5 color类型

​ HTML5提供了type为color的input表单，打破了以前设计网页时，如果想要任意选择一种颜色，必须依赖编辑工具的帮助。用户使用color新型表单控件可以通过鼠标在调色板上自由的选择颜色。

​ 基本语法：

<input type="color" name="名称" />


<!DOCTYPE html>
<html>
<head>
	<title>color</title>
</head>
<body>
	<form>
		选择颜色：
		<input type="color" name="select_color" />
		<input type="submit"/>
	</form>
</body>
</html>

3.9.10.6 filedset控件组

​ <fieldset>标记用于对同一个表单中的控件进行分组，也可以将一个网页上的不同表单进行分组，<legend>标记与<fieldset>标记搭配使用，<legend>标记可以为该控件组定义一个标题。

​ 基本语法：

<form>
  <fieldset>
    <legend>控件组的标题</legend>
   		……
  </fieldset>
</form>	


<!DOCTYPE HTML>
<html>
<head>
	<title>控件组</title>
</head>
<body>
	<form>
  		<fieldset>
    			<legend>用户登录</legend><br/>
			用户名：<input type="text" name="uname" />
			<br /><br />
			密&nbsp;码：<input type="password" name="upass" />
			<br /><br />
			<input type="submit" value="提交"/>
  		</fieldset>
	</form>
</body>
</html>

3.9.11 通用的表单属性

​ 在上一节已经讲了很多HTML5新增的常用的表单元素和属性，在这一节里将继续了解几个很有特点的新属性，这些新属性是input标记的常用的公用属性。如下表所示。

3.9.11.1 autofocus 属性

​ autofocus属性可以让页面的某个表单元素在页面加载完成后自动地获得焦点。

​ 基本语法：

<input autofocus="autofocus" />	


<!DOCTYPE HTML>
<html>
<head>
	<title>控件组</title>
</head>
<body>
	<form>
  		<fieldset>
    		<legend>用户登录</legend><br/>
		用户名：<input type="text" name="uname" autofocus="autofocus"/>
		<br /><br />
		密&nbsp;码：<input type="password" name="upass" />
		<br /><br />
		<input type="submit" value="提交"/>
  		</fieldset>
	</form>
</body>
</html>

3.9.11.2 multiple 属性

​ multiple属性适用于file类型或者select的 <input> 标记。multiple属性设置了这种输入框可以同时选中多个输入值。

​ 基本语法：

<input type="file" multiple="multiple" />	


<!DOCTYPE HTML>
<html>
<head>
	<title>多选下拉框</title>
</head>
<body>
	<form action="get_form.asp" method="get" id="form1">
		选择课程：
		<select name="selectclass" multiple="multiple" size="5"/>
   			<option>语文</option>
   			<option>数学</option>
  			<option>音乐</option>
  			<option>英语</option>
  			<option>美术</option>
		</select>
		<input type="submit" />
	</form>
</body>
</html>

 

3.9.11.3 placeholder 属性

<!DOCTYPE HTML>
<html>
<head>
	<title>文本框提示语句</title>
</head>
<body>
	<form>
		邮箱地址：<input type="email" name="user_email"  placeholder="请输入正确的邮箱地址" />
		<input type="submit" value="提交"/>
	</form>
</body>
</html>

3.9.11.4 required 属性

​ required属性是一个可用于各种表单的通用属性，该属性的作用是检测输入的内容是否为空，但不负责验证数据是否合法。

​ 基本语法：

<inpu required="required" />	


<!DOCTYPE HTML>
<html>
<head>
	<title>文本框提示语句</title>
</head>
<body>
	<form>
		邮箱地址：<input type="email" name="user_email"  placeholder="请输入正确的邮箱地址" required="required" />
		<input type="submit" value="提交"/>
	</form>
</body>
</html>

 

3.9.11.5 pattern 属性

​ pattern属性的作用相当于给input输入域加上一个验证模式，这个验证模式（pattern）是一个正则表达式。在提交时，会将输入框中的内容与表达式进行匹配，如果不符，则提示错误信息。

​ 基本语法：

<input pattern="正则表达式" />	


<!DOCTYPE HTML>
<html>
<head>
	<title>input元素中pattern属性的使用</title>
</head>
<body>
	<form>
 	<fieldset>
   		<legend>pattern属性：</legend>输入用户名:
   		<input name="txtAge" type="text" pattern="^[a-zA-Z]\w{6,8}$" />
   		<input name="frmSubmit" type="submit" value="提交" />
    		<br/>以字母开头,包含字符或数字和下划线,长度在6~8之间 
 	</fieldset>
	</form>
</body>
</html>

 

 

4.本章总结

4.1 总结本章知识点

​ 本章学习了表格和表单的相关标签

4.2 面试题答案

4.2.1 常用的表格标签

​ 常用的表格标签有table,tr,th,td,caption。

4.2.2 常用的表单标签

​ 常用的表单标签有form,input,select,textarea。

4.3 下一章内容

​ 下一章我们要学习CSS样式的基本使用。

5.练习题

5.1 使用表格实现如下效果

5.2 完成如下学生信息表

5.3 完成如下表单效果

5.4 表单综合练习

 

CiCi喜之郎
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML-----第二章表格及样式
BUG专业户
05-20 3270
表格 CSS样式入门 基础选择器
HTML基础知识（二）表格和表单
m0_67961228的博客
01-06 474
主要介绍了表格标签、列表和表单，重点介绍了表单控件中的type属性值
HTML实现简单的注册页面
最新发布
oiadkt的博客
03-07 6228
使用HTML实现一个简单的注册页面
《离思》——元稹
weixin_30920853的博客
07-28 105
曾经沧海难为水，除却巫山不是云。 取次花丛懒回顾，半缘修道半缘君。 转载于:https://www.cnblogs.com/codingthings/p/4684745.html
JS题库
热门推荐
qq_43198747的博客
01-21 1万+
  选择题 1、 JavaScript脚本语言的前身是 （    ） A.Basic     B.Live Script   C.Oak   D.VBScript 答案：B    难度   容易 2、 以下哪个不是javascript语言的特点：（  ）       A. 基于对象  B. 跨平台 C. 编译执行 D. 脚本语言 答案：C 难度   容易 3标记符title是放在...
el-table树形表格表单验证(列表生成序号)
10-15
在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表的序号是为了便于在表单验证中定位特定行数据，尤其是在进行添加、删除或修改操作时。...
FMEA-第五版-应用表格.xlsx
10-07
最完成的 第五版P-FMEA表格，AP矩阵列表，AP等级选择说明，案列分享。
转行做IT-第2章 HTML入门及高级应用
07-01
在“转行做IT-第2章 HTML入门及高级应用”中，我们将深入探讨HTML的基本概念、语法以及高级特性，为你的IT职业道路打下坚实的基础。 一、HTML简介 HTML是一种标记语言，它的主要作用是描述网页结构，通过标签来区分...
表格、表单提示显示-HTML-代码
05-24
本资源"表格、表单提示显示-HTML-代码"是一个示例，旨在帮助前端开发者了解如何在网页中创建动态的表格和表单提示显示。 首先，HTML表格（`<table>`元素）是展示数据的常用方式。它由`<tr>`（行）、`<td>`（单元格...
实验三-HTML表格与HTML表单.doc
07-15
在实验报告中，我们还可以看到，HTML 表格和 HTML 表单的结合使用，用于显示和收集数据。这种结合使用可以实现复杂的交互式应用程序。 知识点总结： 1. HTML 表格的基本结构和应用 2. HTML 表格的样式控制，例如...
HTML基本标签+表格基础+表单和框架
08-15
HTML基本标签+表格基础+表单和框架，基础知识点，初学者了解，后期将逐步加载CSS样式表与JS的使用基础知识点，大家共同使用
如何让html重点表单自动对齐,html – 如何对齐多个表单元素？
weixin_29486701的博客
06-02 723
用纯CSS做这样的事情怎么样？顺便说一下……你知道输入字段和搜索按钮的具体尺寸吗？如果我知道一些尺寸,我可能会做一点清洁工.无论如何,看看演示……HTMLCSS#wrap {min-width: 375px;position: relative;}#fields {float: left;position: relative;}#left {height: 15px;width: 150px;fl...
HTML5.笔记.案例
yxr686的博客
06-16 1万+
HTML 一 . html简介 1.HTML是什么？ HTML:hyper text makrup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检查信息 使用表单获取用户数据，实现交互 3.版本 W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准 两个版本：HTML 4.0.1、
html制作一张学生信息表格,HTML的嵌入式精美学生表格代码
weixin_36164462的博客
06-15 1485
HTML的嵌入式精美学生表格代码Contributor：国民老公45 Type：代码 Date time：2019-11-06 20:35:07 Favorite：4 Score：2返回上页Report请选择举报理由：AdvertisingPoliticallyPornographicGarbage articleOtherCollectionModify the typolegend{text-...
HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”
王迪
11-09 4301
知识点：html文档基本结构、table标签布局、表单标签的使用、img标签、a标签、p标签等常见标签的使用。 制作网页效果：   网页制作思路： 1、将整个网页分成4部分：3个表格+底部段落文字（3个表格设置同样的宽度，水平居中，边框为0等属性） 2、表格1：一个1行2列的表格，左边单元格放logo图，右边单元格放“帮助” 3、表格2：一个1行1列的表格，单元格里放图片 4、表...
HTML5表单及其验证
www.hohode.com
01-16 556
http://www.cnblogs.com/wenwang/archive/2012/04/26/2470403.html
黑马pink前端HTML(二) —— 表格 - 列表 - 表单标签
weixin_44159487的博客
04-23 761
视频参考：https://www.bilibili.com/video/av80149248 笔记参考：https://www.bilibili.com/video/av78942920/?spm_id_from=333.788.b_636f6d6d656e74.6评论区 表格 table 表格作用： 存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式...
分步表单_表单设计-掌握表单设计方法（表单体验篇）
weixin_39942992的博客
12-19 1023
全篇阅读大概需要15min，对表单设计不熟悉的同学看完后肯定会有不少的收获~~~说到表单其实在生活中可以接触到各种各样的表单，比如：驾照申请表、体检表、银行开户需要填写的表等等，这些都是表单，主要目的就是让用户填写来【收集用户信息】。（驾照申请表）做为基础组件的表单，使用频率非常高，对业务起到至关重要的作用，如使用APP时登录页面、某宝下单支付时的页面、自媒体的同学上传自己作品时的页面，这些都是基...
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx
11-14
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；第7章制作表单页面7.1表单的基础知识7.2表单标签7.3表单对象7.4表单按钮7.5上机练习表单——QQ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CiCi喜之郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值