HTML笔记（表单）

一、表格标签

• 规则表格

<body>
		<!--table:定义表格
				常用属性：height：高度
						width：宽度
						border：边框
						cellpadding：内容与单元格之间的距离
						cellspacing：单元格和单元格之间的距离
						
		-->
		<table  border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
			<!--
				tr:定义行
					常用属性：
						align：文本水平方向上的对齐方式,
								有三个取值，默认left-左对齐  center-居中对齐  right-右对齐
			-->
			<tr>
				<!--
					th和td标签都用来定义单元格，
                	th：一般用来定义表头单元格，即做标题的那一行中的单元格   
                	td:一般用来定义非表头单元格，即除了标题正文内容的单元格
                	但是没有严格的限制
                	常用属性:valign:文本垂直方向上的对齐方式 ，top-顶部对齐 bottom-底部对齐 middle-垂直居中
                -->
				<th align="center">序号</th><th>商品名称</th><th>价格</th>
			</tr>
			<tr>
				<td>1</td><td valign="top"><img src="img/a.png"/></td><td>125</td>
			</tr>
			<tr>
				<td>2</td><td valign="bottom">Kitty饼干</td><td>96.0</td>
			</tr>
		</table>
	</body>

• 不规则表格–跨行和跨列

body>
		<!--
			单元格标签th和td中的常用属性：
				colspan：合并列
				rowspan：合并行
				类似Excel中的合并单元格。
		-->
		<table  border="1" cellpadding="0" cellspacing="0" height="300px" width="400px">
			<tr>
				<!--
					colspan="3" 意思是它要和合并包括自身在内的本行的三列单元格，
					所以本行后面的两个单元格的位置要被它占用，所以要删除后面两个单元格
				-->
				<td colspan="3"><h3>个人简历</h3></td><!--<td></td><td></td>-->
			</tr>
			<tr>
				<!--
					rowspan="3" 意思是它要和合并包括自身在内的本列的三行单元格，
					所以本列后面两行的的同样位置的单元格的位置要被它占用，所以要删除后面两行的同位置的单元格
				-->
				<td>姓名:</td><td>贾宝玉</td><td rowspan="3">个人照片</td>
			</tr>
			<tr>
				<td>出生年月:</td><td>1998-6</td><!--<td></td>-->
			</tr>
			<tr>
				<td>电话:</td><td>137123456789</td><!--<td></td>-->
			</tr>
		</table>
	</body>

• 表格的高级标签–标题标签和逻辑分区标签

	<body>
		<table border="1" cellpadding="10" cellspacing="0" width="90%">
			<!--
            	caption:表格的标题
            	thead、tbody、tfoot都是逻辑分区的标签，没有编写样式之前对整体的结构没有任何的影响
            	PS：如果自己没有编写逻辑分区标签，浏览器默认把所有行放入tbody标签中，即table的子节点默认是tbody
            -->
			<caption>资产负债表</caption>
			<thead style="background: lavenderblush;">
				<tr>
					<th>月份</th><th>负债</th><th>资产</th>					
				</tr>
			</thead>
			<tbody  style="background: lightblue;">
				<tr>
					<td>1月份</td><td>10000</td><td>10000</td>					
				</tr>
				<tr>
					<td>2月份</td><td>150000</td><td>150000</td>						
				</tr>
				<tr>
					<td>3月份</td><td>50000</td><td>50000</td>						
				</tr>
			</tbody>
			<tfoot  style="background: khaki;">
				<tr>
					<td>总计</td><td>210000</td><td>210000</td>						
				</tr>
			</tfoot>
		</table>
	</body>

二、表单–非常重要

概念：用于采集用户输入的数据。用于和服务器进行交互。

<!--
        	form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        		常用属性： action：指定提交数据的URL
						method:指定提交方式，一共7种，以下2种比较常用
						    get：
						      1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
						      2. 请求参数大小是有限制的。
						      3. 不太安全。
						    post：
						      2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
						      3. 请求参数的大小没有限制。
						      4. 较为安全。
						enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
        -->
        <form action="dest.html" method="get" enctype="multipart/form-data" autocomplete="on">
			<!--添加表单项元素
				PS：表单项中的数据要想被提交到服务器后可以获取到value：必须指定其name属性
			-->		

表单项元素中的一些属性：

id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色

1、文本框

<input type="text" id="userName" name="userName" placeholder="请输入用户名"/><br />
		<!--
			input：表单元素，其中的type属性的值不同，会出现不同的表现形式
			文本框： type="text",text也是input的默认值
				    id:表示元素的唯一标识，不推荐重复
					name：表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取value
					placeholder：文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失
		-->

2、密码框

<input type="password" id="password" name="password" required/><br />
		<!--
		     密码框：type="password"，用户输入内容之后显示的是黑色实心圆，而不是明文显示内容
		            required：表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示
		 -->	

3、单选按钮

性别：<input type="radio" name="gender" value="男" checked="checked"/>男
		<input type="radio" name="gender" value="女"/>女
		<input type="radio" name="gender" value="未知"/>未知<br />
婚姻状态：<input type="radio" name="statu" value="1"/>已婚
		  <input type="radio" name="statu" value="0" checked/>未婚<br />
		<!--
		     单选按钮：type="radio"
		     单选按钮都是成组出现，name相同的才表示一组，同组当中的按钮都互斥
		            	value：服务器通过name获取到的值就是value
		            	checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked="checked"，
		-->
					

4、复选框

		<!--
		     复选框：type="checkbox"
		    复选框都是成组出现，name相同的才表示一组，同组当中的复选框可以选多个
		            value：服务器通过name获取到的值就是value
		            checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked="checked"，
		-->
			爱好：<input type="checkbox" name="hobby" value="swim" />游泳
				<input type="checkbox" name="hobby" value="NBA" />NBA
				<input type="checkbox" name="hobby" value="movie" />电影
				<input type="checkbox" name="hobby" value="music" />音乐<br />

5、文件域

		<!--
		       文件域：文件上传 type="file"
		       表单中如果有文件上传，表单中最好有enctype="multipart/form-data"
		            multiple属性：表示可以同时上传多个文件
		-->
			头像：<input type="file" name="headImg" multiple="multiple"/><br />

6、日期-h5中得新特性

		<!--
		     日期-h5新特性： 
		            	type="date" 表示年月日
		            	type="datetime-local" 表示既有年月日又有时间
		-->
				生日：<input type="datetime-local"  name="birthday"/><br />

7、隐藏域

			<!--
            	隐藏域： type="hidden" 页面上看不到任何效果
            		作用：隐藏一些用户不关心但是程序员小哥哥小姐姐需要的值
            -->
			隐藏域：<input type="hidden" name="userId" value="1001"/><br />

8、下拉列表框

			<!--
            	下拉列表框： select中写name
            		option：select中的所有选项，
            			其中value表示下拉列表中被选中的项的对应值
            			其中selected表示默认选中
            -->
				<select name="month">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3" selected="selected">3</option>
					<option value="4">4</option>
				</select><br />

9、文本域

				<!--
					textarea:文本域
						cols：指定列数，每一行有多少个字符
					 	rows：默认多少行。
					 	readonly：表示只读，内容不可修改
					 	disabled：表示不可用，样式呈现灰色
				-->
			协议：<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
					条款说明：
					1、必须遵守........
					2、................
				</textarea><br />

10、按钮

• 提交按钮
• 图片按钮
• 重置按钮
• 普通按钮

			<!--
				按钮：value：显示在按钮上的文字
				type="submit"：提交按钮，提交到form的action的指定URL
				type="image"：等价于提交按钮，没有value属性，多了一个src="按钮图片URL"
				type="reset"：重置按钮，清空表单中所有用户输入，货到默认原始状态，相当于刷新了页面
				type="button" ：普通按钮，没有任何功能，只有按钮的样子
			-->
			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
			<input type="button" value="按钮" />
			<input type="image" src="img/a.png" /><br />
			<!--
				button标签与上面的input表示按钮的三个可互换
			-->
			<button type="submit">注册</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>

11、标签

			<!--
				label：指定输入项的文字描述信息
			   		注意：label的for属性一般会和 input 的 id属性值 对应。
				   		如果对应了，则点击label区域，会让input输入框获取焦点。
			-->
			<label for="userName">用户名：</label>

这是上一篇 HTML笔记（上）