第7章 表格和表单

最新推荐文章于 2024-08-04 20:38:28 发布
最新推荐文章于 2024-08-04 20:38:28 发布
阅读量1k 收藏 18
点赞数 17
分类专栏： web前端 文章标签： css3 前端 css html5 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010321564/article/details/135358395
版权

学习目标

  • 掌握创建表格的方法，能够在网页中创建表格。

  • 熟悉表格相关标签的属性，能够运用这些属性设置不同形态的表格。

  • 掌握CSS控制表格样式的方法，能够使用CSS设置表格样式。

  • 了解表单的构成，能够说出表单的构成部分。

  • 掌握创建表单的方法，能够在网页中创建表单。

  • 掌握各类表单控件，能够创建不同功能的表单控件。

  • 掌握HTML5表单新增属性，包括input控件类型、form标签、input属性、form属性。

  • 掌握CSS控制表单样式的方法，能够使用CSS美化表单样式。

表格与表单是HTML网页中的重要标签，利用表格可以对网页进行排版，使网页信息有条理地显示出来，而使用表单则使网页从单向的信息传递发展到能够与用户进行交互对话，实现了网上注册、网上登录、网上交易等多种功能。本章将对表格与表单的相关知识进行详细地讲解。

7.1 表格

日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。为此，HTML语言提供了一系列的表格标签，本节将对这些标签进行详细地讲解。

7.1.1 创建表格

使用标签创建表格的语法格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
<table border="20" cellspacing="20" cellpadding="20" width="600" height="600" align="center" bgcolor="#CCC"  background="images/1.jpg">
   <tr>
      <td>学生名称</td>
      <td>班级</td>
      <td>分数</td>
   </tr>
   <tr>
      <td>小明</td>
      <td>一班</td>
      <td>87</td>
   </tr>
   <tr>
      <td>小李</td>
      <td>二班</td>
      <td>86</td>
   </tr>
   <tr>
      <td>小萌</td>
      <td>三班</td>
      <td>72</td>
   </tr>
</table>
</body>
</html>

注意：tr标签中只能嵌套td标签，不可以在tr标签中输入文字。

7.1.2 table标签的属性

table标签包含了大量属性，虽然大部分属性都可以使用CSS替代，但是HTML语言中也为table标签提供了一系列的属性，用于控制表格的显示样式。

table标签的属性

属性描述常用属性值
border设置表格的边框（默认border="0"为无边框）像素值
cellspacing设置单元格与单元格之间的空间像素值（默认为2像素）
cellpadding设置单元格内容与单元格边缘之间的空间像素值（默认为1像素）
width设置表格的宽度像素值
属性描述常用属性值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式left、center、right
bgcolor设置表格的背景颜色颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)
background设置表格的背景图像背景图像的URL地址

在table标签中，border属性用于设置表格的边框，默认值为0。

注意：直接使用table标签的边框属性或其他取值为像素值的属性时，可以省略单位“px”。

cellspacing属性用于设置单元格与单元格之间的空间，默认距离为2px。

cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，默认为1px。

表格的宽度和高度是自适应的，依靠表格内的内容来支撑，要想更改表格的尺寸，就需要对其应用宽度属性width和高度属性height。

align属性可用于定义表格的水平对齐方式，其可选属性值为left、center、right。

在table标签中，bgcolor属性用于设置表格的背景颜色。

在table标签中，background属性用于设置表格的背景图像。

7.1.3 tr标签的属性

制作网页时，有时需要表格中的某一行特殊显示，这时就可以为<tr>标签添加属性

属性描述常用属性值
height设置行高度像素
align设置一行内容的水平对齐方式left、center、right
valign设置一行内容的垂直对齐方式top、middle、bottom
bgcolor设置行背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background设置行背景图像背景图像的URL地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tr标签的属性</title>
</head>
<body>
<table border="1" width="400" height="240" align="center"> 
	<tr height="80" align="center" valign="top"  background="images/1.jpg">
        <td>姓名</td>
        <td>性别</td>
        <td>电话</td>
        <td>住址</td>
    </tr>
    <tr>
    	   <td>小王</td>
        <td>女</td>
        <td>11122233</td>
        <td>海淀区</td>
    </tr>
    <tr>
        <td>小李</td>
        <td>男</td>
        <td>55566677</td>
        <td>朝阳区</td>
    </tr>
    <tr>
    	   <td>小张</td>
        <td>男</td>
        <td>88899900</td>
        <td>西城区</td>
    </tr>
</table>
</body>
</html>

tr标签无宽度属性width，其宽度取决于表格标签table。在实际工作中均可用相应的CSS样式属性来替代tr标签的属性。

7.1.4 td标签的属性

在网页制作过程中，想要对某一个单元格进行控制，就需要为单元格标签td定义属性。

属性名含义常用属性值
width设置单元格的宽度像素
height设置单元格的高度像素
align设置单元格内容的水平对齐方式left、center、right
valign设置单元格内容的垂直对齐方式top、middle、bottom
属性名含义常用属性值
bgcolor设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background设置单元格的背景图像url地址
colspan设置单元格横跨的列数（用于合并水平方向的单元格）正整数
rowspan设置单元格竖跨的行数（用于合并垂直方向的单元格）正整数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格的合并</title>
</head>
<body>
<table border="1" width="400" height="240" align="center"> 
	<tr height="80" align="center" valign="top" bgcolor="#00CCFF">
        <td>姓名</td>
        <td>性别</td>
        <td>电话</td>
        <td>住址</td>
    </tr>
    <tr>
    	<td>小王</td>
        <td>女</td>
        <td>11122233</td>
        <td rowspan="3">北京</td>         <!--rowspan设置单元格竖跨的行数-->
    </tr>
    <tr>
    	<td>小李</td>
        <td>男</td>
        <td>55566677</td>
                                         <!--删除了<td>朝阳区</td>-->
    </tr>
    <tr>
    	<td>小张</td>
        <td>男</td>
        <td>88899900</td>
                                         <!--删除了 <td>西城区</td>-->
    </tr>
</table>
</body>
</html>

合并单元格的规则:

注释或删除需要合并的单元格 在预留的单元格中添加colspan或rolspan属性，属性值为水平合并的列数或竖直合并的行数。

注意：

1.在td标签的属性中，重点掌握colspan属性和rolspan属性。其他的属性了解即可，不建议使用，这些属性均可用CSS样式属性替代。 2.当对某一个td标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。 3.当对某一个td标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

7.1.5 th标签

应用表格时经常需要为表格设置表头，以使表格的结构更加清晰，方便查阅。表头一般位于表格的第一行或第一列，其文本加粗居中显示。

th标签与td标签的属性、用法完全相同，但是它们具有不同的语义。th标签用于定义表头单元格，其文本默认加粗居中显示，而td标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。

7.1.6 表格的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的网页结构</title>
</head>
<body>
    <table width="600" border="1" cellspacing="0" align="center">
         <thead>                                      <!--thead定义表格的头部-->
            <tr>
                <td colspan="3">网站的logo</td>
            </tr>
            <tr>
            <th><a href="#">首页</a></th>
            <th><a href="#">关于我们</a></th>
            <th><a href="#">联系我们</a></th>
            </tr>
        </thead>
        <tfoot>                                      <!--tfoot定义表格的页脚-->
            <tr>
                <td colspan="3" align="center">底部基本企业信息&copy;【版权信息】</td>
            </tr>	
        </tfoot>
        <tbody>                                      <!--tbody定义表格的主体-->
            <tr height="150">
                <td>主体的左栏</td>
                <td>主体的中间</td>
                <td>主体的右侧</td>		
            </tr>
            <tr height="150">
                <td>主体的左栏</td>
                <td>主体的中间</td>
                <td>主体的右侧</td>		
            </tr>
        </tbody>   
    </table>
</body>
</html>

一个表格只能定义一个thead、一个tfoot，但可以定义多个tbody，它们必须按thead、tfoot和tbody的顺序使用。之所以将tfoot置于tbody之前，是为了使浏览器在接收到全部内容之前即可显示页脚。

7.2 使用CSS控制表格样式

除了表格标签自带的属性外，还可用CSS的边框、宽度、高度、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。本节将从表格边框、单元格边距和单元格宽高三个方面，详细讲解CSS控制表格样式的具体方法。

7.2.1 使用CSS控制表格边框

使用CSS边框样式属性border，可以更改边框的颜色，或改变单元格的边框宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS控制表格边框</title>
    <style type="text/css">
        table{
            width:800px;
            height:300px;
            border:1px solid #30F;      /*设置table的边框*/
            
        }
        th,td{border:1px solid #30F;}  /*为单元格单独设置边框*/
    </style>
</head>
<body>
    <table>
    <caption></caption>    <!--caption定义表格的标题-->
     <tr>
        <th>诗歌序号</th>
        <th>诗歌名称</th>
        <th>作者</th>
        <th>内容</th>
     </tr>
     <tr>
        <th>1</th>
        <td>《峨眉山月歌》</td>
        <td>李白</td>
        <td>峨眉山月半轮秋，影入平羌江水流。夜发清溪向三峡，思君不见下渝州。</td>
     </tr>
     <tr>
        <th>2</th>
        <td>《江南逢李龟年》</td>
        <td>杜甫</td>
        <td>岐王宅里寻常见，崔九堂前几度闻。正是江南好风景，落花时节又逢君。</td>
     </tr>
     <tr>
        <th>3</th>
        <td>《行军九日思长安故园》</td>
        <td>岑参</td>
        <td>强欲登高去，无人送酒来。遥怜故园菊，应傍战场开。</td>
     </tr>
     <tr>
        <th>4</th>
        <td>《夜上受降城闻笛》</td>
        <td>李益</td>
        <td>回乐烽前沙似雪，受降城外月如霜。不知何处吹芦管，一夜征人尽望乡。</td>
     </tr>
     <tr>
        <th>5</th>
        <td>《秋夕》</td>
        <td>杜牧</td>
        <td>银烛秋光冷画屏，轻罗小扇扑流萤。天阶夜色凉如水，卧看牵牛织女星。</td>
     </tr>
    </table>
</body>
</html>

注意：

1.当表格的border-collapse属性设置为collapse时，HTML中设置的cellspacing属性值无效。 2.tr标签无border样式属性。

7.2.2 使用CSS控制单元格边距

使用table标签的属性美化表格时，可以通过cellpadding属性和cellspacing 属性控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS控制单元格边距</title>
    <style type="text/css">
    table{
       border:1px solid #30F;      /*设置table的边框*/
    }
    th,td{
       border:1px solid #30F;     /*为单元格单独设置边框*/
        padding:50px;                 /*为单元格内容与边框设置20px的内边距*/
       margin:50px;                 /*为单元格与单元格边框之间设置20px的外边距*/
    }  
    </style>
</head>
<body>
    <table>
     <tr>
        <th>网络安全问题</th>
        <th>解决方案</th>
        <th>解决办法</th>
     </tr>
     <tr>
        <th>渗透问题</th>
        <td>渗透测试</td>
        <td>渗透测试工程师将利用精湛的技能和先进的技术对系统及应用程序的安全性进行识别和检测。</td>
     </tr>
     <tr>
        <th>漏洞问题</th>
        <td>漏洞评估</td>
        <td>查找并分析内网、外网及云端的漏洞。</td>
     </tr>
    </table>
</body>
</html>

th标签和td标签无外边距属性margin，要想设置相邻单元格边框之间的距离，只能对 table标签应用cellspacing属性。

注意：tr标签无内边距属性padding和外边距属性margin。

7.2.3 使用CSS控制单元格的宽度和高度

单元格的宽度和高度，有着和其他标签不同的特性，主要表现在单元格之间的互相影响上。使用CSS中的width属性和height属性可以控制单元格的宽高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用CSS控制单元格的宽度和高度</title>
    <style type="text/css">
         table{
            border:1px solid #30F;     /*设置table的边框*/
            border-collapse:collapse;   /*边框合并*/
            }
         th,td{
            border:1px solid #30F;     /*为单元格单独设置边框*/
         }
         .one{ width:100px; height:80px;}   /*定义"东"单元格的宽度与高度*/
         .two{ height:40px;}                       /*定义"西"单元格的高度*/
         .three{ width:200px; }                    /*定义"南"单元格的宽度*/ 
    </style>
</head>
<body>
   <table>
      <tr>
         <td class="one"> A房间</td>
         <td class="two"> B房间</td>
      </tr>
      <tr>
         <td class="three"> C房间</td>
         <td class="four"> D房间</td>
      </tr>
   </table>
</body>
</html>

7.3 表单

表单是可以通过网络接收其他用户数据的平台，例如注册页面的账户密码输入、网上订货页等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通对话，本节将对表单进行详细的讲解。

7.3.1 表单的构成

7.3.2 创建表单

在HTML5中，form标签用于创建表单，即定义表单域，以实现用户信息的收集和传递，form标签中的所有内容都会被提交给服务器。

创建表单的语法格式

form标签的常用属性:

action属性用于指定接收并处理表单数据的服务器程序的url地址

<form action="form_action.asp">

action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。

<form action=mailto:htmlcss@163.com>

method属性用于设置表单数据的提交方式。

method属性的取值为get或post，get为method属性的默认值。

<form action="form_action.asp" method="get">

采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，所以使用method="post"可以大量的提交数据。

name属性用于指定表单的名称。

7.3.3 表单控件

1.input控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件。

input控件的语法格式:

<input type="控件类型"/>
属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
属性属性值描述
typesubmit提交按钮
reset重置按钮
image图像形式的提交按钮
hidden隐藏域
file文件域
属性属性值描述
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本内容
size正整数input控件在页面中的显示宽度
readonlyreadonly该控件内容为只读（不能编辑修改）
disableddisabled第一次加载页面时禁用该控件（显示为灰色）
属性属性值描述
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input控件</title>
</head>
<body>
   <form action="#" method="post">
      用户名：                                              <!--text单行文本输入框-->
      <input type="text" value="张三" maxlength="6" /><br /><br />  
       密码：                                               <!--password密码输入框-->
       <input type="password" size="40" /><br /><br />                         
       性别：                                               <!--radio单选按钮-->
       <input type="radio" name="sex" checked="checked" />男
       <input type="radio" name="sex" />女<br /><br />					
       兴趣：                                               <!--checkbox复选框-->
       <input type="checkbox" />唱歌
       <input type="checkbox" />跳舞
       <input type="checkbox" />游泳<br /><br />
       上传头像：
       <input type="file" /><br /><br />                 <!--file文件域-->
       <input type="submit" />                           <!--submit提交按钮-->                                   
       <input type="reset" />                            <!--reset重置按钮-->   
       <input type="button" value="普通按钮" />           <!--button普通按钮-->  
       <input type="image" src="images/login.gif" />     <!--image图像域-->  
       <input type="hidden" />                           <!--hidden隐藏域-->                                       
   </form>
</body>
</html>

单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

<input type="text" value="张三" maxlength="6" />

密码输入框用来输入密码，其内容将以圆点的形式显示。

<input type="password" size="40" />

单选按钮用于单项选择，如选择性别、是否操作等。在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。

<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女

复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。

<input type="checkbox" />唱歌
<input type="checkbox" />跳舞
<input type="checkbox" />游泳

普通按钮常常配合javascript脚本语言使用。

<input type="button" value="普通按钮" />

提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本。

<input type="submit" />

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。

 <input type="reset" />

图像形式的提交按钮与提交按钮在功能上基本相同，显示效果上会使用图像替代了默认的按钮，外观上更加美观。必须为图像按钮定义src属性指定图像的url地址。

<input type="image" src="images/login.gif" />

隐藏域对于用户是不可见的，通常用于后台的程序

 <input type="hidden" />

当定义文件域时，页面中将出现一个文本框和一个“选择文件”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

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

在实际运用中，常常需要将input 控件联合label标签使用，以扩大控件的选择范围，从而提供更好的用户体验，例如在选择性别时，希望单击提示文字“男”或者“女”也可以选中相应的单选按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签的使用</title>
</head>
<body>
<form action="#" method="post">
    <label for="name">姓名：</label>
	<input type="text" maxlength="6" id="name" /><br /><br />  
    性别：      
    <input type="radio" name="sex" checked="checked" id="man" /><label for="man">男</label>
    <input type="radio" name="sex" id="woman" /><label for="woman">女</label>	
</form>
</body>
</html>

2.textarea控件

textarea控件可以轻松地创建多行文本输入框。

textarea控件的语法格式:

可选属性属性值描述
name由用户自定义控件的名称
readonlyreadonly该控件内容为只读（不能编辑修改）
disableddisabled第一次加载页面时禁用该控件（显示为灰色）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea控件</title>
</head>
<body>
<form action="#" method="post"> 
	<textarea cols="60" rows="8">
        昔人已乘黄鹤去，
        此地空余黄鹤楼。   
        黄鹤一去不复返，
        白云千载空悠悠。
        晴川历历汉阳树，
        芳草萋萋鹦鹉洲。
        日暮乡关何处是？
        烟波江上使人愁。
    </textarea><br />
    <input type="submit" value="提交"/>
</form>
</body>

各浏览器对clos属性和rows属性的理解不同，当对textarea控件应用clos属性和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width属性和height属性来定义多行文本输入框的宽高。

3.select控件

浏览网页时，经常会看到包含多个选项的下拉菜单，例如选择所在的城市、出生年月、兴趣爱好等。

使用select控件可以制作下拉菜单效果。

select标签和option标签的常用属性

标签名常用属性描述
selectsize指定下拉菜单的可见选项数，取值为正整数
multiple定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住“Ctrl”键的同时选择多项
optionselected定义selected =" selected "时，当前项即为默认选中项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select控件</title>
</head>
<body>
<form action="#" method="post">
所在校区：<br />
	<select>                                            <!--最基本的下拉菜单-->
    	<option>-请选择-</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>武汉</option>
        <option>成都</option>
    </select><br /><br />
特长（单选）:<br />
    <select>     
    	   <option>唱歌</option>
        <option selected="selected">画画</option>   <!--设置默认选中项-->
        <option>跳舞</option>
    </select><br /><br />
爱好（多选）:<br />
    <select multiple="multiple" size="4">           <!--设置多选和可见选项数-->
    	<option>读书</option>
        <option selected="selected">编程</option>  <!--设置默认选中项-->
        <option>旅行</option>
        <option selected="selected">听音乐</option>  <!--设置默认选中项-->
        <option>踢球</option>
    </select><br /><br />
    <input type="submit" value="提交"/>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为下拉列表中的选项分组</title>
</head>
<body>
<form action="#" method="post">
城区：<br />
	<select>
        <optgroup label="北京">
            <option>东城区</option>
            <option>西城区</option>
            <option>朝阳区</option>
            <option>海淀区</option>
        </optgroup>
        <optgroup label="上海">
            <option>浦东新区</option>
            <option>徐汇区</option>
            <option>虹口区</option>
        </optgroup>
    </select>
</form>
</body>
</html>

7.4 HTML5表单的新增控件类型、标签和属性

HTML5中增加了许多新的表单功能，例如新的input控件类型、新的form标签、新的input属性、新的form属性。这些新增内容可以帮助设计人员更加高效和省力地制作出标准的Web表单。本节将对HTML5新增的表单属性做详细讲解。

7.4.1新的input控件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新的input控件类型</title>
</head>
<body>
<form action="#" method="get">
    请输入您的邮箱：<input type="email" name="formmail"/><br/>
    请输入个人网址：<input type="url" name="user_url"/><br/>
    请输入电话号码：<input type="tel" name="telphone" pattern="^\d{11}$"/><br/>
    输入搜索关键字：<input type="search" name="searchinfo"/><br/>
    请选取一种颜色：<input type="color" name="color1"/>
    <input type="color" name="color2" value="#FF3E96"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

number类型具体属性说明:

value：指定输入框的默认值。 max：指定输入框可以接受的最大的输入值。 min：指定输入框可以接受的最小的输入值。 step：输入域合法的间隔，如果不设置，默认值是1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>number类型的input控件的使用</title>
</head>
<body>
<form action="#" method="get">
    请输入数值：<input type="number" name="number1" value="1" min="1" max="20" step="4"/><br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

range类型具体属性说明:

min属性：设置最小值。 max属性：设置最大值， step属性：指定每次滑动的步幅。

时间和日期类型说明
date选取日、月、年
month选取月、年
week选取周和年
time选取时间（小时和分钟）
datetime选取时间、日、月、年（UTC时间）
datetime-local选取时间、日、月、年（本地时间）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间和日期类型的使用</title>
</head>
<body>
<form action="#" method="get">
    <input type="date"/>&nbsp;
    <input type="month"/>&nbsp;
    <input type="week"/>&nbsp;
    <input type="time"/>&nbsp;
    <input type="datetime"/>&nbsp;
    <input type="datetime-local"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

注意：对于浏览器不支持的input控件输入类型，将会在网页中显示为一个普通输入框。

7.4.2 新的表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>datalist标签</title>
</head>
<body>
<form action="#" method="post">
    请输入用户名：<input type="text" list="namelist"/>
    <datalist id="namelist">
        <option>admin</option>
        <option>lucy</option>
        <option>lily</option>
    </datalist>
    <input type="submit" value="提交" />		
</form>
</body>
</html>

2.output标签

output标签用于定义不同类型控件的输出，输出结果会显示在output标签中。output标签通常配合input控件使用。

属性说明
for定义输出域相关的一个或多个元素
form定义输入字段所属的一个或多个表单
name定义对象的唯一名称
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>output标签</title>
</head>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
        <input type="range" id="a" value="50">100
        +<input type="number" id="b" value="50">
        =<output name="x" for="a b"></output>
    </form>
</body>
</html>

7.4.3 新的input控件属性

autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>autofocus属性</title>
</head>
<body>
<form action="#" method="get">
    请输入搜索关键字：<input type="text" name="user_name" autocomplete="off" autofocus="true"/><br/>
    <input type="submit" value="提交" />
</form>
</body>
</html>

form属性可以把表单内的子元素写在页面中的任意位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form属性</title>
</head>
<body>
<form action="#" method="get" id="user_form">
    请输入您的姓名：<input type="text" name="first_name"/>
    <input type="submit" value="提交" />	
</form>
    <p>下面的输入框在form标签外，但因为指定了form属性值为表单的id属性值，所以该输入框仍然属于表单的一部分。</p>
    请输入您的昵称：<input type="text" name="last_name" form="user_form"/><br/>
</body>
</html>

list属性用于指定输入框所绑定的datalist标签，制作提示输入效果，其值是某个datalist标签的id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list属性</title>
</head>
<body>
<form action="#" method="get">
请输入网址：<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
	<option label="公司A" value="网址1"></option>
    <option label="公司B" value="网址2"></option>
    <option label="公司C" value="网址3"></option>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html>

multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input控件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>multiple属性</title>
</head>
<body>
<form action="#" method="get">
    电子邮箱：<input type="email" name="myemail" multiple="true"/>&nbsp;&nbsp;（如果电子邮箱有多个，请使用英文逗号分隔）<br/><br/>
    上传照片：<input type="file" name="selfile" multiple="true"/><br/><br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

min、max和step属性用于为包含数字或日期的input控件规定限值适用于Date pickers、number和range等类型的input控件。

pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配

正则表达式说明
^[0-9]*$数字
^\d{n}$n位的数字
^\d{n,}$至少n位的数字
^\d{m,n}$m-n位的数字
^(0|1-9*)$零或非零开头的数字
正则表达式说明
^(1-9*)+(.[0-9]{1,2})?$非零开头的最多带两位小数的数字
^(-|+)?\d+(.\d+)?$正数、负数
^\d+$ 或 ^[1-9]\d*|0$非负整数
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$非正整数
^[\u4e00-\u9fa5]{0,}$汉字
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$英文和数字
^[A-Za-z]+$由26个英文字母组成的字符串
^[A-Za-z0-9]+$由数字和26个英文字母组成的字符串
正则表达式说明
^\w+$ 或 ^\w{3,20}$由数字、26个英文字母或者下划线组成的字符串
^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、数字包括下划线
^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$Email地址
^(https?:\/\/)?([\da-z.-]+).([a-z.]{2,6})([\/\w .-])\/?$/URL地址
正则表达式说明
^\d{15}|\d{18}$身份证号(15位、18位数字)
^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以数字、字母x结尾的短身份证号码
^a-zA-Z{4,15}$帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
^[a-zA-Z]\w{5,17}$密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pattern属性</title>
</head>
<body>
<form action="#" method="get">
    账&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />（以字母开头，长度为5~16，只能包含字母、数字和下划线）<br/>
    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />（以字母开头，长度为6~18，只能包含字母、数字和下划线）<br/>
    身份证号：<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />（15位、18位数字）<br/>
    电子邮箱：<input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

placeholder属性用于为input类型的输入框提供相关提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>placeholder属性</title>
</head>
<body>
<form action="#" method="get">
    请输入邮政编码：<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码" />
    <input type="submit" value="提交"/>
</form>
</body>
</html>

注意：placeholder属性适用于type属性值为text、search、url、tel、email以及password的input标签。

required属性用于判断用户是否在输入框中输入内容，当表输入框容为空时，则不允许用户提交表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>required属性</title>
</head>
<body>
<form action="#" method="get">
    请输入姓名：<input type="text" name="user_name" required="required"/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

7.4.4 新的表单属性

autocomplete属性用于指定表单是否有自动完成功能。

on：表单有自动完成功能。 off：表单无自动完成功能。

autocomplete属性示例代码

<form id="formBox" autocomplete="on">

novalidate属性指定在提交表单时取消对表单进行检查。

novalidate属性示例代码

<form action="form_action.asp" method="get" novalidate="novalidate">

7.5 使用CSS 控制表单样式

在网页设计中，表单既要具有相应的功能，也要具有美观的样式，使用CSS可以轻松控制表单控件的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS控制表单样式</title>
    <link href="style25.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form action="#" method="post">	
      <p>
        <span>账号：</span>
        <input type="text" name="username" class="num" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
      </p>
      <p>
        <span>密码：</span>
        <input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/>
      </p>
      <p>
        <input type="button" class="btn01" value="登录"/>
      </p>
    </form>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{font-size:18px; font-family:"微软雅黑"; background:url(images/timg.jpg) no-repeat top center; color:#FFF;}       
form,p{ padding:0; margin:0; border:0;}   /*重置浏览器的默认样式*/
form{
	width:420px;
	height:200px;
	padding-top:60px;
	margin:250px auto;                      /*使表单在浏览器中居中*/
	background:rgba(255,255,255,0.1);    /*为表单添加背景颜色*/
	border-radius:20px;
	border:1px solid rgba(255,255,255,0.3);
	} 
p{
	margin-top:15px; 
	text-align:center;
 } 
p span{
	width:60px;
	display:inline-block; 
	text-align:right;
	} 
.num,.pass{                /*对文本框设置共同的宽、高、边框、内边距*/ 
	width:165px; 
	height:18px; 
	border:1px solid rgba(255,255,255,0.3);
    padding:2px 2px 2px 22px; 
	border-radius:5px;
	color:#FFF;
	} 
.num{             /*定义第一个文本框的背景、文本颜色*/
	background:url(images/3.png) no-repeat 5px center rgba(255,255,255,0.1);
    } 
.pass{            /*定义第二个文本框的背景*/
    background: url(images/4.png) no-repeat 5px center rgba(255,255,255,0.1);
     }
.btn01{
	width:190px; 
	height:25px; 
	border-radius:3px;       /*设置圆角边框*/ 
	border:2px solid #000; 
	margin-left:65px;
	background:#57b2c9;
	color:#FFF;
	border:none;
	}

7.6 阶段案例——信息登记表

为了使读者能够更好地运用表单控件，本节将通过案例的形式分步骤制作一个信息登记表。

@charset "utf-8";
/* CSS Document */
body{font-size:12px; font-family:"微软雅黑";}                   /*全局控制*/
body,form,input,h1,p{padding:0; margin:0; border:0;  color:#fff;}        /*重置浏览器的默认样式*/
.bg{
	width:1431px;
	height:717px;
	background:url(images/form_bg.jpg) no-repeat;       /*添加背景图片*/
	position:relative;                                       /*设置相对定位*/
}
form{
	width:600px; 
	height:400px; 
	margin:50px auto;                    /*使表单在浏览器中居中*/
	padding-left:30px;                   /*使边框和内容之间拉开距离*/
	position:absolute;                   /*设置绝对定位*/
	left:48%;
	top:10%;
}
h2{                                       /*控制标题*/
	text-align:center;
	margin:16px 0; 
}
p{margin-top:20px;}
p span{
	width:75px; 
	display:inline-block;                /*将行内元素转换为行内块元素*/
	text-align:right;                     /*居右对齐*/
	padding-right:10px; 
	}
p input{                                    /*设置所有的输入框样式*/
	width:200px; 
	height:18px; 
	border:1px solid #38a1bf;
	padding:2px;                           /*设置输入框与输入内容之间拉开一些距离*/
}
.lucky input{                               /*单独设置幸运颜色输入框样式*/
	width:100px;
	height:24px; 
}
.btn input{                                /*设置两个按钮的宽高、边距及边框样式*/
	width:100px; 
	height:30px;
	background:#fc7885;
	margin-top:20px; 
	margin-left:75px; 
	border-radius:3px;                      /*设置圆角边框*/
	font-size:18px;
	font-family:"微软雅黑";
	color:#fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息登记表</title>
    <link href="style26.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="bg">
      <form action="#" method="get" autocomplete="off">
      <h2>信息登记表</h2>
      <p><span>用户登录名：</span><input type="text" name="user_name" value="myemail@163.com" disabled readonly />（不能修改，只能查看）</p>
      <p><span>真实姓名：</span><input type="text" name="real_name"  pattern="^[\u4e00-\u9fa5]{0,}$" placeholder="例如：王明" required autofocus/>（必须填写，只能输入汉字）</p>
      <p><span>真实年龄：</span><input type="number" name="real_lage" value="24" min="15" max="120" required/>（必须填写）</p>
      <p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-01" required/>（必须填写）</p>
      <p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="123456@126.com" required multiple/>（必须填写）</p>
      <p><span>身份证号：</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$"/>（必须填写以数字、字母x结尾的身份证号）</p>
      <p><span>手机号码：</span><input type="tel" name="telphone" pattern="^\d{11}$" required/>（必须填写）</p>
      <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http://www.00000.cn" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"/>（请选择网址）
        <datalist id="urllist">
        <option>http://www.aaaaa.cc</option>
        <option>http://www.bbbbb.cc</option>
        <option>http://www.ccccc.cc</option>
        </datalist>
      </p>
      <p class="lucky"><span>幸运颜色：</span><input type="color" name="lovecolor" value="#fed000"/>（请选择你喜欢的颜色）</p>
      <p class="btn">
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
      </p>
      </form>
  </div>
</body>
</html>

本章小结

本章介绍了HTML5中两个重要的元素——表格与表单，主要包括表格相关标签、表单相关控件以及如何使用CSS控制表格与表单的样式。在本章的最后，通过表单控件并使用CSS对表单进行修饰，制作一个常见的信息登记表。 通过本章的学习，读者应该能够掌握表格和表单的用法，熟练运用表格和表单组织页面元素。

笔触狂放
关注
  • 17
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
form表单居中_第二章 表格和表单
weixin_39809140的博客
10-26 1569
第二章 表格和表单内容回顾HTML的基本标签有哪些HTML的标题标签和段落标签是什么HTML的文本标签有哪些如何在页面中插入图片和视频本章内容如何使用表格展示数据，如何使用表单收集数据。第一节 表格1.表格的基本结构表格的作用是用于展示数据，例如，财务报表，公交车时刻表，电视节目表。在大多数情况下，这类信息都是由列标题或行标题加上数据本身构成。下面是一个表格的基本结构:在HTML中定义表格的基本标...
HTML表单基础(掌握)
qq_38148024的博客
10-16 405
表单基础(掌握) 文章目录表单基础(掌握)2.label标签(理解)3.文本域textarea4.下拉菜单5.表单域 现实中的表单，类似我们去银行办理信用卡填写的单子。目的是为了手机用户信息。在网页当中，也需要跟用户进行交互，收集用户资料，此时也是需要填写表单的。 在HTML中，一个完整的表单通常是由 ：表单控件(也称为表单元素)、提示信息、表单域3个部分构成。 表单控件：包含了具体的表单功能项...
html第三章表单上机,《HTML第三章 表格和表单.ppt
weixin_34137975的博客
06-18 162
《HTML第三章 表格和表单表单包含的控件 单行文本输入框(TEXT) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET) 提交按钮(SUBMIT) 多行文本框(TEXTAREA) 密码框(PASSWORD) Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profil...
小白入门之HTML--第二章 表格和表单
随心笔记
07-08 1099
1.本章面试题 1.1 表格的基本标签有哪些 1.2 常用的表单元素有哪些 2.知识点 2.1 上一章内容回顾 ​ 上一章我们学习了HTML语言的概念和一些常用的标签，包括标题标签，段落标签，换行标签，格式化标签，字体形状标签，字体标签，图像标签，超链接标签，网页文档结构标签，视频标签，音频标签等常用标签。 2.2 本章我们要学习网页中的表格和表单 3.具体内容 3.1 表格的基本...
第七章:HTML网页中的表格与表单
小宫主的博客
10-26 2708
目录   1.HTML表格标签: 表格标签 表格语法: 表格样式 2.HTML表单基础 表单标签 表单组成 HTML表单元素 文本域及其标记 密码域 单选按钮： 复选框： 下拉列表： 多行文本域： 分组框： 3.HTML5表单新属性 自动完成属性：autocomplete 自动焦点属性：autofocus 4.HTML5表单输入类型 email类型： ...
HTML标签之表格和表单元素
知识点沉淀包括不限于前端
01-20 1151
HTML标签之表格和表单元素 1.表格标签 表格由<table>标签来定义； 每个表格均有若干行（由 <tr> 标签定义） 每行被分割为若干单元格（由 <td> 标签定义） 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 表格Table HTML表格表头: 表格的表头使用标签进行定义；大多数浏览器会把表头显示为粗体居中的文本。 HTML带有标题的表格: 表格的标题用captio
从零开始学前端——表格和表单（第五章）
weixin_70081542的博客
01-24 923
我们先生成一个表格水平合并：colspan竖直合并: rowspan仔细观察：1.单元格2这一行由于我们需要把它合并，先把这一行删除。2.使用colspan的时候，想在水平合并几个单元格，就让colspan的参数直接等于几即可，我现在合并两个，就为2。使用方式和colspan没什么不同的地方。注意：水平合并保留左边单元格，删除右边单元格。竖直合并保留上面单元格，删除下面单元格。在合并单元格时，以上和左为基准。二、FORM表单2.1form表单的作用。
HTML中的表格和表单
国庆的博客
09-16 4476
目录 1、表格 1.1创建表格 1.2 表格属性 1.3 表头单元格和表格标题 2、表单 2.1 input控件 2.2 label标签 2.3 textarea控件（文本域） 2.4 下拉菜单 2.5 表单域 1、表格 表格是较为常见的一种标签，但不是用来布局，常见处理、显示表格数据。 （1）表格提供了HTML中定义表格数据的方法 （2）表格由行中的单元格组成 （3...
HTML网页入门D7——表格与表单（信息展示与信息采集）
m0_53156691的博客
02-02 2430
HTML的表格与表单页面结构 写在前面：表格和表单是两种特殊的页面结构。表格用来展示数据，表单用来输入和传递信息。两者在网页的信息展示与采集方面发挥着重要作用。
第6章 Dreamweave中表格和表单的应用.pptx
09-23
7. **格式化表格**：使用“命令”-“格式化表格”功能，可以快速统一表格的样式，如调整边框宽度、对齐方式等。 【Dreamweaver表单应用】 表单是网页中用于收集用户信息的关键元素，常见于数据提交和反馈场景。...
HTML02表格和表单.ppt
09-15
表格用于组织和展示数据，而表单用于收集用户输入信息。本文将详细介绍 HTML 表格和表单的基本概念、结构、标记和使用方法。 一、HTML 表格 HTML 表格是由 TABLE 标记定义的，用于组织和展示数据。表格由行和列...
第七章网页设计与网站建设基础.ppt
11-12
使用创建表格可以清晰地表现文字、图像、表单，并提供导航工具和对WEB站点进行整体布局。用户可以使用“表格属性”命令来重新指定表格的宽度、对齐方式、边框粗细及单元格的边距和空间等属性。 4. 插入图片 在网页...
[精选]第9章表单设计技术.pptx
10-12
本章分为创建表单、管理表单和常用表单控件三大主题。 **创建表单** 在VFP中创建表单有两种主要方法：使用表单向导和表单设计器。创建表单后，系统会生成两个文件，分别是扩展名为.SCX的表单文件和.SCT的表单备注...
Angularjs2表单和表格
04-28
在AngularJS 2（现在称为Angular）中，表单和表格是构建动态用户界面的关键元素。Angular提供了强大的数据绑定和表单验证功能，使得开发者能够高效地处理用户输入和展示数据。下面我们将深入探讨AngularJS 2中表单和...
原神自定义倒计时
最新发布
lulei5153的博客
08-04 527
【代码】原神自定义倒计时。
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
爱敲代码的卡拉米的博客
08-03 382
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1527
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 384
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
"第七章网页设计与网站建设基础
通过学习第七章《网页设计与网站建设基础》，我们应该掌握了FrontPage 2000的窗口组成和视图模式，学会了创建网站和网页，插入和编辑图片、表格、多媒体信息等内容，并且了解了创建框架网页和表单的方法。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

笔触狂放

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

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

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

打赏作者

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

抵扣说明：

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

余额充值