html表单代码怎么写_html表单制作代码

无偿！花2万买的前端视频教程分享（大纲+视频+习题+源码）持续更新……第3章 HTML表格与表单 　　小白福利来了！花了2w买的前端视频教程，从安装开始教你，全套教程学会即可就业！无偿分享，拿走不谢！ 　　HTML表格 　　生活中，经常使用表格来统计数据和信息，这样可以更清晰地显示数据或信息，同理在在制作网页时 为了有条理地显示网页中的素，可以使用表格对网页进行布局和规划，从而可以给浏览者展示大量且清晰的排列数据，表格在网页中应用得极其广泛。 　　表格的基本结构 　　每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，其语法格式如下：

　　上面三个标签是创建表格的基本标签，其中<table></table>标签用于定义一个表格。<tr>标签用于定义表格中的一行，必须嵌套在<table></table>标签中，在<table></table>标签中包含几对<tr></tr>，表示该表格有几行。<td></td>标签用于定义表格中的单格，必须嵌套在<tr></tr>标签中，一对<tr></tr>包含几对<td></td>，表示该行中有多少个单格（列）。 　　表格内除了可以添加文本外，还可以添加其它标签素，如：图片、列表、段落等。 　　默认情况下表格是没有边框的，如果想要给表格添加边框，可以设置表格的border属性，数值为边框的宽度。 　　表头与标题 　　为了使表格的格式更清晰方便读者查阅，应用表格时经常需要为表格设置表头，表头<th>是<td>单格的一种标题，其本质还是一种单格，一般位于表格的第一行或第一列，用来表明这一行或列的内容类别。浏览器会将表头默认以粗体居中的样式显示在网页中。 　　<th>标签和<td>在本质上都是单格，但这两种不可以互换使用。th即“table header（表头单格）”。而td即“table data（单格）”。 　　表格一般都有一个标题，用来表明表格的内容，一般位于整个表格的第一行，使用<caption>标签。一个表格只能含有一个表格标题。 　　表格语义化 　　为了使网页内容更好的被搜索引擎理解，在使用表格进行布局时，HTML中引入了<thead>、<tbody>和<tfoot>这三个语义化标签，用来将表格划分为头部、主体和页脚三部分。用这三个部分来定义网页中不同的内容，三个标签的详细理解如下。 　　l <thead></thead>标签：用于定义表格的头部，位于<table></table>标签中，一般包含网页的logo和导航等头部信息。 　　l <tfoot></tfoot>标签：用于定义表格的页脚，位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。 　　l <tbody></tbody>标签：用于定义表格的主体，位于<table></table>标签中。<tfoot></tfoot>标签之后，一般包含网页中除头部和底部以外的其他内容。 　　语义化表格效果上并没有什么变化，<thead>、<tbody>和<tfoot>三个标签不带任何效果，只是更好地提供了语义化的功能，根据表格的需求尽量添加相应的语义化标签。需要注意<thead>、<tfoot>这两个标签在一个<table>标签中只能出现一次，而<tbody>标签可以出现多次。 　　合并行与列 　　在word中设计表格时，有时需要将两个或多个的相邻单格组合成一个单格，即合并单格的操作。在HTML中，也需要用到“表格合并行”和“表格合并列”。 合并行使用<td>标签的rowspan属性，而合并列则用到<td>标签的colspan属性。 　　单格边距与间距 　　表格还有用于控制单格边距与间距的属性，即cellpadding和cellspacing属性，cellpadding属性用于设置单格内容与单格边框之间的空白间距，默认为1px.，cellspacing属性用于设置单格与单格边框之间的空白间距，默认为2px。 　　表格其他属性 　　HTML为表格提供了一系列的属性，用于控制表格的显示样式，除上面<table>标签的属性，还有很多控制单格和单格内容的属性，具体如表所示。 　　<table>标签常用属性 　　属性名含义属性值width设置表格的宽度像素值height设置表格的高度像素值align设置单格内容的水平对齐方式left(左对齐)、enter(居中对齐)、right（右对齐）valign设置单格内容的垂直对齐方式baseline（基线对齐）、top（上对齐）、middle（居中对齐）、bottom（下对齐） 　　接下来将详细介绍表中的属性 　　1. width属性 　　width属性可以设置单格的宽度，当一列有多个不同width属性值时，取最大值作为这一列的宽度。 　　2. height属性 　　height属性可以设置单格的高度，当一行有多个不同height属性值时，取最大值作为这一行的高度。 　　3. align属性 　　align属性可以设置单格的内容左右对齐方向， <th>标签的align属性默认为center，<td>标签的align属性默认为left。<table>标签也有align属性，用来设置表格在网页中的水平对齐方式。 　　4. valign属性 　　valign属性可以设置单格的内容垂直对齐的方向，默认为center(居中对齐)。 　　HTML表单 　　表单是网页中常用的一种展示效果，如登录页面中的用户名和密码的输入、登录按钮等都是用表单相关的标签定义的。表单是HTML中用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现网页与用户的交流。本节将详细讲解表达使用，先来观察微博登录、注册页面表单的展示效果，如图所示。



　　微博登录、注册展示效果 　　HTML中，一个完整的表单通常由表单素、提示信息和表单域三个部分组成，下面将详细介绍这三个部分。 　　l 表单素：包含表单的具体功能项，如文本输入框、下拉列表框、复选框、密码输入框、登录按钮等。 　　l 提示信息：表单中通常还需包含一些说明性的文字，提示用户要进行的操作。 　　l 表单域：用来容纳表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果未定义表单域，表单中的数据就无法传送到后台服务器。 　　表单素是表单的核心，常用的表单素如表所示。 　　表单素表单素含义<input>表单输入框（可定义多种表单项）<textarea>定义多行文本框<select>定义一个下拉列表(必须包含列表项)<label>定义表单辅助项 　　这里先简单了解常用的表单素，后面的小节将详细讲解。 　　<form>标签 　　为了实现网页与用户的交流，需要让表单中的数据传送给后台服务器，这就必须定义表单域。定义表单域用<table>标签定义表格类似，HTML中<form>标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，<form></form>标签中的所有内容都会被提交给服务器。其语法格式如下：

　　HTML表单将数据发送给后台服务器，用到<form>的action、method、enctype和target属性，下面详细了解这四个属性。 　　1. action属性 　　action属性是用来定义表单数据的提交地址，即一个URL。HTML表单要想和后台服务器进行连接，就需要在action属性上设置一个URL。比如两人打电话，双方要通话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。具体示例如下：

　　表示提交表单时，表单数据会传送到qianfeng_action.asp的页面处理。 　　action属性值可以是相对路径或绝对路径，还可以是接收数据的E-mail邮箱地址。具体示例如下：

　　表示提交表单时，表单数据以电子邮件的形式传递出去。 　　2. method属性 　　method属性用来定义表单数据的提交方式，常用的有get（默认）和post两种方式。提交方式类似于通信方式，可以打电话、发短信或发邮件。一般情况下，一些数据用get方式，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。post方式的保密性好，而且无数据量的限制，使用method=”post”可以大量提交数据。 　　3. enctype属性 　　enctype属性用来定义表单数据的提交内容形式，常用的有application/x-www-form-urlencoded（默认）和multipart/form-data两种方式。提交内容可以是网页中的文本，也可以是图片或视频等非文本的内容，因此需要对enctype属性选择不同的设置。 　　4. target属性 　　target属性用来定义提交地址的打开方式，常用的有_self（默认）和_blank两种方式。打开方式可以选择当前页打开，也可以在新页面打开，<form>标签中的target属性跟<a>标签中的target属性一样，这里不再赘述。 　　<input>标签 　　网页中经常会包含有单行文本框、单选按钮、复选框、提交按钮等，要想定义这些表单素需要使用<input>标签，其基本语法格式如下：

　　1. type属性 　　<input>标签通过type属性取值不同可以展示不同的表单类型，其属性值如表。 　　表type属性取值 　　表单素含义text单行文本框password密码文本框radio单选框checkbox复选框button按钮submit提交按钮reset重置按钮hidden隐藏域image图像形式的按钮file文件上传按钮 　　表中列出了type属性的取值及含义，下面将分别讲解这些属性。 　　（1）text、password 　　text值用来展示单行文本框，password值用来展示密码文本框，一般用与登录界面。 　　（2）radio、checkbox 　　radio值用来展示单选框，checkbox值用来展示复选框，一般在调查问卷中使用。 　　（3）button、submit、reset 　　button值用来设置普通按钮，submit值用来设置提交按钮，reset值用来设置重置按钮。 　　普通按钮没有任何行为，常用于在用户单击按钮时启动JavaScript程序。提交按钮可以看成一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给后台服务器处理。重置按钮也可以看成一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。 　　（4）hidden 　　hidden值用于隐藏那些只是往后台服务器发送一些数据，但又不影响页面布局的表单控件。 　　（5）image 　　image值用来设置图像形式的按钮，src属性用来引入图像的地址，目的是替换submit的默认样式，从而完成更加美观的展示。 　　（6）file 　　file值用来设置文件上传的按钮，文件上传是网站中常见的功能，例如网盘文件上传和邮箱文件上传。设置file值时，<form>标签的method属性必须设置成post，enctype属性必须设置成multipart/form-data。 　　网页中经常能看到一些漂亮的上传按钮，这些按钮都是通过CSS来实现的，后面的章节将会详细讲解。 　　2. 其他属性 　　<input>标签除了type属性，还有一些常用的属性，如表3.4所示。 　　<input>标签其他属性 　　属性属性值含义name自定义素的名称value自定义素的值maxlength正整数素允许输入的最多字符数disableddisabled第一次加载页面时禁用该素（显示为灰色）readonlyreadonly素内容为只读（不能修改编辑）checkedchecked定义选择素默认被选中的项 　　表3.4中列出了<input>标签中其他常用的属性，下面进行详细讲解。 　　（1）name、value属性 　　name属性用来规定input素的名称，value属性用来规定input素的值。在前面的案例中，已经接触过name和value这两个属性，其中name值和value值配合成一对来使用，这样后台服务器就可以通过name值来找到对应的value值。 　　（2）maxlength属性 　　maxlength属性规定输入内容允许的最大字符数，如设置maxlength属性，则输入控件不会接受超过所允许字符数。 　　（3）disabled、readonly属性 　　disabled属性规定输入内容是禁用的，被禁用的素是不可用和不可单击的。readonly属性规定输入内容为只读（不能修改，但是能当前只读的内容）。 　　（4）checked属性 　　checked属性规定在页面加载时应该预先选定的input素。checked属性与<input type=”checkbox”>或<input type=”radio”>配合使用。 　　<textarea>标签 　　单行文本框只能输入一行信息，而多行文本框可以输入多行信息。多行文本框使用的是<textarea>标签，而<input>标签只能设置单行文本框。 　　<select>标签 　　网页中经常会看到包含多个选项的下拉菜单，如选择城市、日期、科目、校区选择等。HTML中用<select>标签设置下拉列表，其需要与<option>标签配合使用，这个特点和列表一样，如无序列表是由<ul>标签和<li>标签配合使用。为了更好地理解，可以把下拉列表看作一个特殊的无序列表。 　　下拉列表是一种最节省页面空间的选择方式，因为在正常状态下只显示一个选项，单击下拉菜单打开菜单后才会看到全部的选项。 　　和其他标签一样，<select>标签也有其常用的属性，如表。 　　表 type属性取值 　　属性含义multiple多选操作size下拉列表可见选项的数目selected选中项 　　1.multiple属性 　　multiple属性可以设置多选下拉列表，默认下拉列表只能选择一项，而设置multiple属性后就可以选择多项了（使用“Ctrl+鼠标左键”进行多选操作）。 　　2.size属性 　　size属性可以设置下拉列表可见选项的数目，默认情况下单选下拉菜单显示一项。 　　3.selected属性 　　selected属性表示选中项，与单选框的checked属性类似，注意selected属性是设置到<option>标签上的。 　　<select>标签中使用<optgroup>标签进行分组项操作，把相关的选项组合在一起。<optgroup>标签的label属性来设置分组项的标题。 　　<label>标签 　　<label>标签用来辅助表单素，可以更好地提高用户体验。当用户选择<label>标签内文本进行时，会自动将焦点转到和标签相关的表单控件上。 　　通过本章的学习，能够掌握HTM表格和HTML表单的基本使用，了解前端与后台服务器之间如何交互与通信。 　　千锋视频教程，持续更新中…… 　　无偿！2万多买的前端HTML5视频教程-HTML历史 　　无偿！2万多买的前端HTML5视频教程-HTML语义化 　　无偿！2万多买的前端HTML5视频教程-HTML常用标签(上) 　　无偿！2万多买的前端HTML5视频教程-HTML常用标签(下) 　　无偿！2万多买的前端HTML5视频教程-web前端简介 　　无偿！2万多买的前端HTML5视频教程-web前端开发工具 　　无偿！2万多买的前端HTML5视频教程-HTML入门