HTML表单和输入
1、HTML表单用于收集不同类型的用户输入
2、表单是一个包含表单元素的区域
3、表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
4、表单使用表单标签 <form> 来设置
HTML表单：输入元素
1、多数情况下被用到的表单标签是输入标签（<input>）。<input>元素是最重要的表单元素
2、输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下
⑴文本域：文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
⑵密码字段：密码字段通过标签<input type="password">来定义，密码字段字符不会明文显示，而是以星号或圆点替代
⑶单选按钮：表单单选框选项通过标签<input type="radio">来定义
⑷复选框：复选框通过标签<input type="checkbox">来定义，用户需要从若干给定的选择中选取一个或若干选项
⑸提交按钮：提交按钮通过标签<input type="submit">来定义
⑹下拉框：下拉框通过标签<select>来定义
注：
1、<input>元素在<form>元素中使用，用来声明允许用户输入数据的input控件
2、输入字段可通过多种方式改变，取决于type属性
3、<input> 元素是空的,它只包含标签属性(属性写在开始标签中，无结束标签)
4、可以使用<label>元素来定义<input>元素的标注
5、<label>标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验
6、当用户单击确认(提交)按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
form标签的属性
1、action {URL}：一个URL地址；指定form表单向何处发送数据。
2、enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。指定的值有：
⑴application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）
⑵multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值
3、method {get/post}：指定表单以何种方式发送到指定的页面。指定的值有：
⑴get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
⑵post ：form表单里所填的值，附加在HTML Headers上
例1：文本域
注：
1、上面例子中：需要显示在客户端中的内容需要写在<form>标签对中，<input>就像是内嵌的一个标签(注意内嵌的位置)
2、表单本身并不可见。同时在大多数浏览器中，文本域的缺省宽度是20个字符
3、<input>标签对中的maxlength属性可用于限制输入的字符长度
例2：密码字段
<form>
<!--密码字段-->
Password: <input type="password" name="pwd" maxlength="11">
</form>
例3：单选按钮
<form>
<!--单选按钮-->
Male<input type="radio" name="sex" value="male">
<br>
<input type="radio" name="sex" value="female">Female
</form>
注：
1、从上面的例子中可以看出：需要确定好<input>标签的内嵌位置，不同的位置，客户端显示出来的可能会不一样
2、这种写法中，用户只能点击按钮才能选中，点击文本文字是不能选中的，因此可以使用<label>，使用<label>标签是使用户体验更好：可以点击文本文字进行选中
例3_1：
注：
1、<label>标签通过for属性的值来关联到对应<input>标签的id属性的值：如果for属性的值与<input>标签未对应上，则不能通过点击文本文字来选中
2、如果需要将选择按钮显示在文本文字之前，则需要将<input>标签内嵌在<label>标签中；若未内嵌的话显示在客户端的文本文字就必须写在<label>标签对中(不能写在<form>标签对中了)，不然不能通过文本文字来选中
例4：复选框
例5：提交按钮
注：
假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果
例5_1:
<form>
<input type="submit" id="submit" class="btn_login" value="登 录"/>
<input type="button" id="register" style="margin-left:20px" class="btn-primary" data-toggle="modal" data-target="#myRegisterModal" value="注册"/>
<label for="rememberMe" title="下次不需要再登录">
<input type="checkbox" id="rememberMe" name="rememberMe" />记住密码
</label>
</form>
<html> <head> </head> <body> Password: <input type="password" name="pwd" maxlength="11"> </body> </html>
下拉框
1、<select>元素用来创建下拉列表
2、<select>元素中的<option>标签定义了列表中的可用选项
3、select元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将<select>表单数据提交给服务器时包括name属性
4、<select> 元素是一种表单控件，可用于在表单中接受用户输入例6：带有预选值的下拉列表(使用selected指定预选值)
例6：带有预选值的下拉列表(使用selected指定预选值)
注：未设置预选值时，则默认选择第一个选项
例6_1：带有链接的下拉列表
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select选择-按钮跳转</title>
<script type="text/javascript">
function setsubmit()
{
if(mylink.value == 0)
window.location='http://www.baidu.com';
if(mylink.value == 1)
window.location='http://www.w3cschool.cn';
if(mylink.value == 2)
window.location='http://www.w3cschool.cn';
}
</script>
</head>
<body>
<select name="mylink" id="mylink">
<OPTION value="0">百度</OPTION>
<OPTION value="1">w3cschool在线教程</OPTION>
<OPTION value="2">优聚</OPTION>
</select>
<input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
</body>
</html>
注：提交数据时，其实也可以不用form包裹input标签
1、如果有form标签，在点击提交铵钮时，浏览器自动收集参数，并打包一个http请求到服务器，完成表单提交。在这一过程中，浏览器会根据method的不同，将参数编码后，放在urI中(get)，或者放在请求的data中(post)。然后发送到服务器
2、如果没有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url
3、form在网页中主要负责数据采集功能。感觉form标签的作用只是划定一个区域，然后在这个区域中收集数据
一个表单有三个基本组成部分：
（1）表单标签：包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法：<form>标签
（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等：<input>标签等
（3）表单按钮：提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。
HTML表格
1、表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）
2、字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
HTML表格的基本结构：
⑴<table>…</table>：定义表格
⑵<th>…</th>：定义表格的标题栏（文字加粗）
⑶<tr>…</tr>：定义表格的行
⑷<td>…</td>：定义表格的列
HTML表格的边框属性
使用边框属性border来显示一个带有边框的表格，如果不定义边框属性，表格将不显示边框：<table border="1">
例1：
<h4>一行一列:</h4>
<table>
<tr>
<td>100</td><!--无边框时-->
</tr>
</table>
<h4>一行两列:</h4>
<table border="1">
<tr>
<td>100</td><!--有边框时-->
<td>200</td>
</tr>
</table>
注：
1、在创建表格时：<table>定义一个表格，<tr>创建一行，<td>创建一列(表中的数据)
2、感觉这种创建表格就是：先使用<tr>定义一个占位行，再用<td>或<th>去填充数据，有几个数据就是几列(一行中的全部列填完后，再创建下一行)
HTML表格的表头单元格
1、表格的表头单元格使用<th>标签进行定义
2、表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height
3、大多数浏览器会把表头显示为粗体居中的文本
例7：
<h4>一行两列:</h4>
<table border="1">
<tr>
<th width="40" height="30">名字</th>
<th width="40" height="30">年龄</th>
</tr>
<tr>
<td>张三</td><!--有边框时-->
<td>20</td>
</tr>
</table>
注：
1、创建表头的方法跟创建列的方法一样，只是用的标签对不一样
2、在某个<th>或<td>标签对中设置的单元格的长高时，只是针对这个单元格，对其他单元格无影响
HTML表格的高度和宽度
在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度(这里就感觉是个全局的)
例8：
HTML表格的背景
可以使用以下方法之一设置HTML表格的背景
1、bgcolor属性：可以为整个表格或仅为一个单元格设置背景颜色
2、background属性：可以为整个表设置背景图像或仅为一个单元设置背景图像
3、bordercolor属性：可以设置边框颜色
注：HTML5中不推荐使用bgcolor，background和bordercolor属性
例9：使用background属性需要提供图像URL地址
例9_1：
HTML表格空间
有以下两个属性，用于调整HTML表格中单元格的空间
1、cellspacing属性：定义表格单元格之间的空间
2、cellpadding属性：表示单元格边框与单元格内容之间的距离
例10：
注：个人感觉cellspacing这个参数设置为0要好点，默认值不为0
HTML合并单元格
1、如果要将两个或多个列合并为一个列，将使用colspan属性
2、如果要合并两行或更多行，则将使用rowspan属性
例11：
<table border = "1" cellspacing="0">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
HTML列表
HTML支持有序、无序和定义列表
HTML无序列表
1、无序列表是一个项目的列表，无序列表适合成员之间无级别顺序关系的情况
2、无序列表默认使用粗体圆点（典型的小黑圆圈）进行标记，可以在<ul>标签对中增加style属性来修改标记，如<ul style="list-style-type:circle">
3、无序列表使用<ul>标签
例12：
HTML有序列表
1、同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签，每个列表项始于<li>标签
2、有序列表适合各项目之间存在顺序关系的情况
3、列表项默认使用数字来标记，可以在<ol>标签对中增加type属性来修改标记，如<ol type="A">表示使用A-Z来标记
例13：
HTML自定义列表
1、自定义列表不仅仅是一列项目，而是项目及其注释的组合
2、自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始。每个自定义列表项的定义(注释)以<dd>开始
3、自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说<dt>与<dd>在其中数量不限、对应关系不限
例14：
注：
1、列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
2、自定义列表中可以没有注释项(无<dd>标签对)
嵌套列表
例15：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<h4>嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
拓展：列表与表单结合
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699"/>
<form>
<table width="600px" bgcolor="#f2f2f2" align="center">
<tr>
<td>姓名：</td>
<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" value="@163.com" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="paw" size="25" maxlength="6" placeholder="请再次输入密码"/></td>
</tr>
<tr>
<td>上传照片：</td>
<td><input type="file" name="file"/></td>
</tr>
<tr>
<td>性别：</td>
<td>男<input type="radio" name="sex" value="man" />女<input type="radio" name="sex" value="woman" checked/></td>
</tr>
<tr>
<td>爱好：</td>
<td>
读书<input type="checkbox" name="dx1" value="read" checked />
运动<input type="checkbox" name="dx1" value="dance" />
唱歌<input type="checkbox" name="dx1" value="sing" />
</td>
</tr>
<tr>
<td >
<input type="button" value="来点我" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
<td valign="bottom"><input type="image" name="image_button" src="img/button1.png">
</td>
</tr>
<tr>
<td><input type="hidden" name="hidden" value="这是一个用户注册信息" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
来源：https://www.cnblogs.com/Mouse-hao/p/11545273.html