第六章 HTML表单
2016-04-23 13:13
465 查看
1、表单是网页上用于输入信息的区域,它的功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。
2、完整额表单由表单控件(表单元素),提示信息,表单域三个部分构成。
表单域:相当于一个容器,容纳所有的表单控件和提示信息。可以通过它定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据无法传到后台服务器。
3、表单控件:<input /> 表单输入控件(可定义多种表单项)
<textarea></ textarea >定义多行文本框
<select></ select> 定义一个下拉列表(必须包含列表项)
4、创建表单:<form></form> 标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,
<form action="url地址" method="提及方式" name="表单名称"> 各种表单控件 </form >
action:在表单收集到信息后,需要将信息传递给服务器进行处理,这个属性用于指定接受并处理表单数据的服务器程序的url地址,(如<form action="form_action.asp">)。可以是相对路径或绝对路径,还可以为接受数据的邮箱地址,(如<form action=mailto:htmlcss@163.com>)表示当提交表单时,表单数据会以电子邮件的形式传递出去。也可以用#号。
method:表单数据的提交方式。get为默认值,数据将显示在浏览器的地址栏中,保密性差,有数据量的限制。post:保密性好,并且无数据量的限制。
name:用于指定表单的名称,以区分同一个页面中的多个表单。
5、要对input设置高度,宽度等,先将<input/>标记转换为块元素。
6、<input type="控件类型"/>
type属性的属性值:text(单行文本输入框)
password(密码输入框)
radio(单选按钮)
checkbox(复选框)
button(普通按钮)
submit(提交按钮)
reset(重置按钮)
image(图像形式的提交按钮)
hidden(隐藏域):对于用户是不可见的,通常用于后台的程序。
file(文件域)
name属性的属性值为由用户自定义(描述:控件的名称)
value属性的属性值为由用户自定义(描述:input控件中的默认文本值)
size属性的属性值为正整数(描述:input控件在页面中的显示宽度)
readonly属性的属性值为readonly(描述:该控件内容为只读,不能编辑修改)
disabled属性的属性值为disabled(描述:第一次加载页面时禁用该控件,显示为灰色)
checked属性的属性值为checked(描述:定义选择控件默认被选中的项)
maxlength属性的属性值为正整数(描述:控件允许输入的最多字符数)
7、常常需要将<input/> 标记联合<label>标记使用,以扩大控件的选择范围。
(如<input type="radio" name="sex" checked="checked " id="man"/><label for="man">男</label>)
使用<label>标记包含表单中的提示信息,并且将其for属性的值设置为相应表单控件的id 名称,这样<label>标记标注的内容就绑定到了指定id的表单控件上,当单击<label>标记中的内容时,相应的表单控件就会处于选中状态。
8、textarea属性
<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
9、select控件
<select>
<option>选项1</option>......(select标记中至少包含一对option)
</select>
标记名:<select>
常用属性:size(指定下拉菜单的可见项数)
multuple(定义multiple="multiple"时,下拉菜单将具有多项选择的功能,方法为按住ctrl键的同时选择多项)
标记名:<option>
常见属性:selected(定义selected="selected"时,当前向即为默认选中项)
10、<optgroup></optgroup>标记用于定义选项组,必须嵌套在<select></select>标记中,一对<select></select>中通常包含多对<optgroud></optgroup>。在<optgroud></optgroup>之间为<option></option>标记定义的具体选项。注:<optgroup>标记有一个必需的属性label.
11、form是块元素,重置浏览器的默认样式时,需要清除其内边距和外边距。
input控件默认有边框效果,当使用<input/>标记定义各种按钮时,通常需要清除其边框。
2、完整额表单由表单控件(表单元素),提示信息,表单域三个部分构成。
表单域:相当于一个容器,容纳所有的表单控件和提示信息。可以通过它定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据无法传到后台服务器。
3、表单控件:<input /> 表单输入控件(可定义多种表单项)
<textarea></ textarea >定义多行文本框
<select></ select> 定义一个下拉列表(必须包含列表项)
4、创建表单:<form></form> 标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,
<form action="url地址" method="提及方式" name="表单名称"> 各种表单控件 </form >
action:在表单收集到信息后,需要将信息传递给服务器进行处理,这个属性用于指定接受并处理表单数据的服务器程序的url地址,(如<form action="form_action.asp">)。可以是相对路径或绝对路径,还可以为接受数据的邮箱地址,(如<form action=mailto:htmlcss@163.com>)表示当提交表单时,表单数据会以电子邮件的形式传递出去。也可以用#号。
method:表单数据的提交方式。get为默认值,数据将显示在浏览器的地址栏中,保密性差,有数据量的限制。post:保密性好,并且无数据量的限制。
name:用于指定表单的名称,以区分同一个页面中的多个表单。
5、要对input设置高度,宽度等,先将<input/>标记转换为块元素。
6、<input type="控件类型"/>
type属性的属性值:text(单行文本输入框)
password(密码输入框)
radio(单选按钮)
checkbox(复选框)
button(普通按钮)
submit(提交按钮)
reset(重置按钮)
image(图像形式的提交按钮)
hidden(隐藏域):对于用户是不可见的,通常用于后台的程序。
file(文件域)
name属性的属性值为由用户自定义(描述:控件的名称)
value属性的属性值为由用户自定义(描述:input控件中的默认文本值)
size属性的属性值为正整数(描述:input控件在页面中的显示宽度)
readonly属性的属性值为readonly(描述:该控件内容为只读,不能编辑修改)
disabled属性的属性值为disabled(描述:第一次加载页面时禁用该控件,显示为灰色)
checked属性的属性值为checked(描述:定义选择控件默认被选中的项)
maxlength属性的属性值为正整数(描述:控件允许输入的最多字符数)
7、常常需要将<input/> 标记联合<label>标记使用,以扩大控件的选择范围。
(如<input type="radio" name="sex" checked="checked " id="man"/><label for="man">男</label>)
使用<label>标记包含表单中的提示信息,并且将其for属性的值设置为相应表单控件的id 名称,这样<label>标记标注的内容就绑定到了指定id的表单控件上,当单击<label>标记中的内容时,相应的表单控件就会处于选中状态。
8、textarea属性
<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
9、select控件
<select>
<option>选项1</option>......(select标记中至少包含一对option)
</select>
标记名:<select>
常用属性:size(指定下拉菜单的可见项数)
multuple(定义multiple="multiple"时,下拉菜单将具有多项选择的功能,方法为按住ctrl键的同时选择多项)
标记名:<option>
常见属性:selected(定义selected="selected"时,当前向即为默认选中项)
10、<optgroup></optgroup>标记用于定义选项组,必须嵌套在<select></select>标记中,一对<select></select>中通常包含多对<optgroud></optgroup>。在<optgroud></optgroup>之间为<option></option>标记定义的具体选项。注:<optgroup>标记有一个必需的属性label.
11、form是块元素,重置浏览器的默认样式时,需要清除其内边距和外边距。
input控件默认有边框效果,当使用<input/>标记定义各种按钮时,通常需要清除其边框。
相关文章推荐
- sublime text设置html的浏览器预览
- HtmlUnit的使用
- innerHTML VS createElement
- django使用html模板减少代码
- html中的input文本框完成格式错误提示功能
- HTML中label的两种使用方法
- sublime text编辑器html页面预览
- html转图片
- 【总结】<p>内实现空格的几个方法及对比
- HTML转义字符
- jtable中某列实现html中a标签效果,鼠标移到上面去的时候显示手型效果
- html内容滚动
- html邮件链接和锚点链接
- 关于 html中,section 和div 的区别
- HTML DOM
- 句法结构可视化工具(成分句法)
- innerHTML outerHTML innerText textContent的区别
- html快速入门(基础教程+资源推荐)
- URLForResource加载项目内的HTML
- HTML 字符实体 < >: &等