java_web-HTML-3-01-12-2015
来源:互联网 发布:摩托分期付款怎么算法 编辑:程序博客网 时间:2024/05/21 01:51
这个事在java学习中的重点 我们只需要操作这个些东西进行数据 传输
表单的定义:表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
八、表单标记:
1、表单标记:form
<form>:表单标记
在HTML中,<form></form>标志对用来创建一个表单,也即定义表单的开始和结束位置,在标志对之间的一切都属于表单的内容。
每个表单元素开始于form元素,可以包含所有的表单控件,还有任何必须的伴随数据,如控件的标签、处理数据的脚本或程序的位置等。在表单的<form>标记中还可以设置表单的基本属性,包括表单的名称、处理程序、传送方法等。一般情况下,表单的处理程序action和传送方法method是必不可少的参数。
a、action属性:
action:处理程序
真正处理表单的数据脚本或程序是在action属性里,这个值可以是程序或脚本的一个完整的URL。
语法:
<form action="表单的处理程序">
……
</form>
说明:在该语法中,表单的处理程序定义的是表单要提交的地址,也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址,也可以是相对地址,还可以是一些其他的地址形式,例如发送E-mail等。
实例代码:
<html><head><title>设定表单的处理程序</title></head><body>下面是关于本产品的调查内容:<!--这是一个没有控件的表单--><form action="mailto:abcd@163.com"></form></body></html>在这个实例中,就是定义了表单提交的地址为一个邮件,当程序运行后会将表单中收集到的内容以电子邮件的形式发送出去。b、name属性:
name:表单名称
名称属性name用于给表单命名。这一属性不是表单的必需属性,但是为了防止表单信息在提交到后台处理程序时出现混乱,一般要设置一个与表单功能符合的名称,例如注册页面的表单可以命名为“register”。不同的表单尽量不用相同的名称,避免混乱。
语法:
<form name="表单名称">
……
</form>
说明:表单名称中不能包含特殊符号和空格。
c、method属性:
method:传送方法
表单的method属性用来定义处理程序从表单中获得信息的方式,可取值为get和post的其中一个,它决定了表单中已收集数据是用什么样的方法发送到服务器的。
- method=get:使用这个设置时,表单数据会被视为CGI或ASP的参数发送,也就是来访者输入的数据会附加在URL之后,由用户端直接发送至服务器,所以速度上会比post快,但缺点是数据长度不能够太长。在没有指定method的情形下一般都会视get为默认值。
- method=post:使用这种设置时,表单数据是与URL分开发送的,用户端的计算机会通知服务器来读取数据,所以通常没有数据长度上的限制,缺点是速度上也会比POST慢。
<form method="传送方式">
……
</form>
说明:传送方式的值只有两种选择:get或post。
d、enctype属性:
enctype:编码方式
表单中的enctype参数用于设置表单信息提交的编码方式。
语法:
<form enctype="编码方式">
……
</form>
说明:enctype属性为表单定义了MIME编码方式,编码方式的取值可以为下表中所示的内容。
e、target属性:
target:目标显示方式
target属性用来指定目标窗口的打开方式。表单的目标窗口中往往用来显示表单的返回信息,例如是否成功提交了表单的内容,是否出错等。
语法:
<form target="目标窗口的打开方式">
……
</form>
说明:目标窗口的打开方式包含4个取值:_blank、_parent、_self、_top。其中_blank是指将返回的信息显示在新打开的窗口中;_parent是指将返回信息显示在父级的浏览器窗口中;_self则表示将返回信息显示在当前浏览器窗口;_top表示将返回信息显示在顶级浏览器窗口中。
实例代码:
<html><head><title>设定表单的目标窗口打开方式</title></head><body>下面是关于本产品的调查内容:<!--这是一个没有控件的表单--><form action="mailto:abcd@163.com" name="research" method="post" enctype=" Text/plain " target="_self"></form></body></html>在这个实例中,设置表单的返回信息将在同一窗口中显示。
以上所讲解的只是表单的基本构成标记,而表单的<form>标记只有和它所包含的具体控件相结合才能真正实现表单收集信息的功能。下面就对表单中各种功能的控件的添加方法加以说明。
2、表单标记:id
Id属性
在HTML的表单元素中,还有一个id属性。它主要用于标示一个惟一的元素,这个元素可以是文字字段,可以是密码域也可以是其他的表单元素,甚至也可以定义一幅图像、一个表格。但是在实际应用中,表单是使用id属性最多的一类元素。
基本语法:
<id="元素的标识名">
说明:在HTML中,由于id用来标识页面的惟一元素,因此在定义标识名的时候最好要根据其含义进行命名。
实例代码:
<html><head><title>添加文本域</title></head><body>下面是某网站的留言页面:<form action="mailto:abcd@163.com" name="research" method="post"> <p>用户名: <input name="username" type="text" size=20 id="username"> </p> <p>密 码: <input name="password" type="password" size=20> </p> <p>留言:<br> <textarea name="word" rows=5 cols=70> </textarea> </p> <p> <input type="submit" name="Submit" value="提交"> <input type="reset" name="reset" value="重置"> </p></form></body></html>在该实例中,定义了用户名的文字字段ID为username。而在运行程序的时候,页面中并不显示该ID,只是在将信息传送到服务器的时候会同时被提交。
3、表单标记:input
<input>:添加控件
在HTML表单中,input参数是最常用的控件标记,包括最常见的文本域、按钮抖擞采用这个标记。
这个标记的基本语法是:
<form>
<input name="控件名称" type="控件类型">
</form>
在这里,控件名称是为了便于程序对不同控件的区分,而type参数则是确定了这一个控件域的类型。在HTML中,input参数所包含的控件类型如下表中所示的值。
a、text属性值:文字字段
在网页中最常见的就是文本字段的表单,例如网页的用户登录区。文字字段的type属性值为text。而text类型的控件在页面中以单行文本框的形式显示,在页面中还可以设置控件的名称、控件的长度、最长字符数等。
语法:<input type="text" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">
说明:在该语法中包含了很多参数,它们的含义和取值方法不同,见下表所示。其中name、size、maxlength参数一般是不会省略的参数。
b、password属性值:密码域
在网页中有一种特殊的文本字段,它在页面中的效果和文本字段相同,但是当用户输入文字的时候,这些文字只显示“*”,这种控件称为密码域。
语法:<input type="password" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">
说明:在该语法中包含了很多参数,它们的含义和取值如下表所示。其中name、size、maxlength参数一般是不会省略的参数。
c、radio属性值:单选按钮
在网页中,单选按钮用来让浏览者进行单一选择,在页面中以圆框表示。在radio控件中必须要设置参数value的值。而对于一个选择中的所有单选按钮来说,往往要设定同样的一个名称,这样在传递的时候才能更好地对某一个选择内容的取值进行判断。
语法:
<input type="raido" value="单选按钮的取值" name="单选按钮名称" checked>
说明:在该语法中,checked属性表示这一单选按钮默认被选中,而在一个单选框中只能有一项单选按钮控件设置为checked。value则用来设置用户选中该项目后,传送到处理程序中的值。
d、checkbox属性值:复选框
在网页设计中,有一些内容需要让浏览者以选择的形式填写,而选择的内容可以是一个,也可以是多个,这时就需要使用复选项控件checkbox。
复选项在页面中以一个方框来表示。
语法:
<input type="checkbox" value="复选项的值" name="名称" checked>
说明:在该语法中,checked参数表示改选项在默认情况下已经被选中,一个选择中可以有多个复选项被选中。
e、button属性值:普通按钮
在网页中按钮也很常见,在提交页面,恢复选项的时候常常用到。普通按钮一般情况下要配合脚本来进行表单处理。
语法:
<input type="button" name="按钮名" value="按钮的取值" onclick="处理程序">
说明:value的取值就是显示在按钮上面的文字,而在button中可以通过添加onclick参数来实现一些特殊的功能,onclick参数是设置当鼠标按下按钮的时候所进行的处理。
f、submit属性值:提交按钮
提交按钮是一种特殊的按钮,不需要设置onclick参数,在单击该类按钮时可以实现表单内容的提交。
语法:
<input type="submit" name="按钮名" value="按钮的取值">
说明:在该语法中,value同样用来设置按钮上显示的文字。
g、reset属性值:重置按钮
在页面中还有一种特殊的按钮,成为重置按钮。这类按钮可以用来清除用户在页面中输入的信息。
h、image属性值:图像域
在页面中还有一种控件形式,称为图像域,常用在创建特殊效果的按钮中,因此也常常被称为图像提交按钮。
语法:
<input type="image" src="图像地址" name="图像域名称">
说明:在该语法中,图像地址可以是绝对地址或相对地址。
i、hidden属性值:隐藏域
表单中的隐藏域主要用来传递一些参数,而这些参数不需要在页面中显示。当浏览者提交表单的时候,隐藏域的内容会一起提交给处理程序。
语法:
<input type="hidden" name="隐藏域名称" value="提交的值">
j、file属性值:文件域
文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件的时候常常会看到这一控件。
语法:
<input type="file" name="文件域的名称">
4、表单标记:select
<select>:下拉菜单
下拉菜单是一种最节省页面空间的选择方式,因为在正常状态下只显示一个选项,单击按钮打开菜单后才会看到全部的选项。
语法:
<select name="下拉菜单的名称">
<option value="选项值" selected>选项显示内容
<option value="选项值">选项显示内容
……
</select>
说明:在该语法中,选项值是提交表单时候的值,而选项显示内容才是真正在页面中显示的选项。selected表示该选项默认情况下是选中的,一个下拉菜单中只能有一项默认被选中。
5、表单标记:option
<option>:列表项
列表项的设置方法与下拉菜单类似,不同的是列表项在页面中可以显示出几条信息,一旦超出这个信息数量,在列表右侧会出现滚动条,拖动滚动条能看到所有的选项。
语法:
<select name="列表项名称" size="显示的列表项数" multiple>
<option value="选项值" selected>选项显示内容
<option value="选项值">选项显示内容
……
</select>
说明:在该语法中,size设定页面中的最多列表项数,当超过这个值的时候会出现滚动条。multiple表示这一列表可以进行多项选择。选项值是提交表单时候的值,而选项显示内容才是真正在页面中显示的选项。
6、表单标记:textarea
<textarea>:文本域标记
除了以上讲解的两大类控件外,还有一种特殊定义的文本样式,称为文字域或文本域。它与文字字段的区别在于可以添加多行的文字,从而可以输入更多的文本。这类控件在一些留言板中最为常见。
语法:
<textarea name="文本域名称" value="文本域默认值" rows=行数 cols=列数>
</textarea>
说明:在该语法中,rows是指文本域的行数,也就是高度值,当文本内容超出这一范围会出现滚动条;cols设置文本域的列数,也就是其宽度。
- java_web-HTML-3-01-12-2015
- java_web-HTML-2-01-12-2015
- JAVA_WEB设计模式3
- java_web
- Java_Web基础--JDBC/HTML/Servelet/Web/JSP/jQuery(你必须要懂得基础)
- 初窥——进入公司后的JAVA_WEB开发01
- java_web会话
- Java_Web 6.26
- java_web需要哪些技术
- java_web之ServletContext应用
- JAVA_WEB经典面试题
- JAVA_WEB学习经验总结
- Java_Web 回顾 MVC模型
- java_web之ServletContext应用
- java_web工程改名
- java_web开发入门
- java_web乱码问题
- java_web开发入门
- 【推荐】经典C++库
- python中的pandas包
- 希尔排序(PHP实现)
- 入门视频采集与处理(学会分析YUV数据)
- ios获得自定义cell 的当前行数
- java_web-HTML-3-01-12-2015
- sql中的if else 的一个小陷阱
- shell:读取文件的每一行内容并输出
- 开启LeetCode刷题模式~
- android ListView异步加载图片(双缓存)
- 获取 SQL Server Image Text ntext数据长度
- opencv安装及测试
- 二分法(PHP实现)
- 将Cocos2d-x的VS工程导入XCode