HTML表单笔记

表格

<table width="500" border="0" align="center" cellspacing="0" cellpadding="0">
	<tr align="center">  //行 对齐
		<td> </td> //单元格
		<td> </td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
	</tr>
</table>

表格属性		含义										常用属性值

border		设置表格的边框(默认border="0"无边框)		像素值

cellspacing		设置单元格与单元边框之间的空白间距		像素值(默认为2像素)

cellpading		设置单元格内容与单元格边框之间的空白间距	像素值(默认为1像素)

width		设置表格的宽度							像素值

height		设置表格的高度							像素值

align		设置表格在网页中的水平对齐方式				left center right


表头标签:

表头单元格一般位于表格的第一行或第一列,其文本加粗居中,<th></th>替代相应的单元格标签<td></td>即可


表格标题:caption
定义和用法:
caption元素定义表格标题
<table>
	<caption>我是表格标题</caption>
</table>
caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上


合并单元格
跨行合并单元格:rowspan	跨列合并:colspan
合并单元格的思想:
	将多个内容合并的时候,就会又多余的东西,把他删除。例如把3个td合并成一个,就需要删除多余的2个
公式:删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左

<tr colspan="2">15235</tr>
<tr rowspan="2">123</tr>

input控件:

<input />标签为 单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义很多其他的属性。


					text				单行文本输入框
					password			密码输入框
					radio				单选按钮
					checkbox			复选框
type				button 				普通按钮
					submit				提交按钮
					reset				重置按钮
					image				图形形式的提交按钮
					file				文件域

name				由用户自定义			控件的名称
value				由用户自定义			input控件中的默认文本值
size				正整数				input控件在页面中的显示宽度
checked				checked				定义选择控件默认被选中的项
maxlength			正整数				控件允许输入的最多字符数


radio如果是一组,必须给他们命名相同的名字name


label标签
label标签为input元素定义标签
作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
如何绑定元素呢
for属性规定label与哪个表单元素绑定
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)
如果需要输入大量信息,就需要用到<textarea> </textarea>,通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>

下拉菜单:
使用select控件定义下拉菜单的基本语法格式如下:
<select>
	<option>选项</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>
注意:
1.<select></select>中至少应包含一队<option></option>
2.在option中定义selected
="selected"时,当前项即为默认选中项


表单域:
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户 信息的收集和传递,form中的所有的内容都会被提交给服务器。创建表单的基本语法格式:

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

常用属性:
1.action
	在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定并处理表单数据的服务器程序的url地址。
2.method:
	用于设置表单数据的提交方式,其取值为get或post
3.name:
	用于指定表单的名称,以区分同一页面中的多个表单
注意:每个表单都应该有自己的表单域

查文档:W3shool   MDN



发布了71 篇原创文章 · 获赞 3 · 访问量 4044

猜你喜欢

转载自blog.csdn.net/zouchengzhi1021/article/details/105293055