JEE_HTML2
<form name="form name" method="method" action="url" enctype="value" target="target_win"> …… </form>
<form>常用属性有: (1)action:用来设定处理表单数据的页面或脚本,属性值通常为动态网页文件的路径。例如:action="do.jsp"、action="do.aspx"。 如果属性值为空则表示提交到页面本身。 (2)method:用来设定将表单数据传输到服务器所使用的方法,可取的属性值有: get:将表单数据附加到所请求的URL中,是以明文的形式出现在URL上的,此种方法不能传送大量数据,且不安全,所以不常用。 post:将表单数据嵌入HTTP请求中,通过HTTP包进行传送,不显示在客户端浏览器上,此种方法容许传送大量数据,较为常用。
(3)enctype属性:设置表单内容的编码方式:
text/plain:纯文本形式 application/x-www-form-urlencoded:默认的编码形式
multipart/form-data:使用MIME编码
(4)target属性:用于指定返回信息的显示方式
_blank:将返回信息显示在新窗口中
_parent:父级窗口
_self:当前窗口中
_top:顶级窗口中
知识点点:
1.以前在项目中为一个表单(from)编写onsubmit()脚本的时候,经常需要验证表单中数据的合法性,所以常会写道:<form action="/admin/addUser.do" method="post" onsubmit="validateForm();">,试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。
后来发现onsubmit="return validateForm()"就没有问题了。原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
2.在Html中,<input>标签是不是一定要放在<form>标签里?
只能放在<body></body>以内 如果不用AJAX提交表格,那么需要用<form action="" method="">, 如果用AJAX,不需要<form>,并且<input type="submit" name="" />可以用<button id=""></button>代替
=====在<form>和</form>之间,可以使用<input>、<select>等建立输入或者选择项。
===><table>标签
2、文本框 文本框允许用户输入单行信息,如姓名、邮件地址等。定义文本框的语法为:
<input type="text" name="名称" value="默认值" size="宽度" maxlength="最多字符数">
文本框除了type属性外,其他常用属性有: (1)name:用来设定文本框的名称,表单提交到服务器后需要使用指定的名字来获取文本框的值。 (2)value:用来设定文本框的默认值,也就是用户输入前文本框里显示的文本。 (3)size:用来设定文本框最多可以显示的字符数,也就是文本框的长度。 (4)maxlength:用来设定文本框中最多可以输入的字符数。通过此属性可以将邮政编码限制为6位数,将密码限制为10个字符,等等。
3、密码框 密码框用来让用户输入密码,当用户在密码框中键入时,输入内容显示为项目符号或星号,以保护它不被其他人看到。定义语法为:
<input type="password" name="名称" value="默认值" size="宽度" maxlength="最多字符数">
密码框的其它属性与文本框相同
4、单选按钮 单选按钮用来让用户只能从一组选项中选择一个选项,例如,性别的选择。单选按钮通常成组的使用,在同一个组中的所有单选按钮 必须具有相同的名字。定义单选按钮的语法为:
<input type="radio" name="sex" value="男" checked> … <input type="radio" name="sex" value="女">
单选按钮除type外其它常用属性有: (1)name:用来设定单选按钮的名称,作用同文本框的name。同一组中所有单选按钮的此属性必须设定相同的值,否则,各选项不会相互排斥。 (2)value:用来设定在单选按钮被选种时发送级服务器的值。 (3)checked:服务业设定在浏览器中载入表单时,该单选按钮是否被选种。如果开始标记里加入checked一词,则初始被选中。
通过name属性来判断是否属于同一个单选按钮组。
5、复选框 定义复选框的语法为:
<input type="checkbox" name="like" value="唱歌" checked> … <input type="checkbox" name="like" value="跳舞"> <input type="checkbox" name="like" value="看书" checked>
复选框除type外其它常用属性有: (1)name:用来设定复选框的名字,作用同文本框的name。 (2)value:用来设定在复选框被先选中时发送给服务器的值。 (3)checked:用来在浏览器中载入表单时,该复选框是否被选中。如果开始标记里加入checked一词,则初始被选中。
6、下拉菜单 下拉菜单的定义语法:
<select name="zone"> <option value="1" selected>广东 </option> <option value="2">河北 </option> <option value="3">北京 </option> </select>
一个下拉菜单由 <select>和 </select>来定义, <select>提供容器,它的name属性意义同文本框的相同。 <option>用来定义一个菜单项 <option>与 </option>之间的文本是呈现给访问者的,而选中后传送的值是由value指定的,如果省略value属性,则value的值与文本 相同,加入selected属性可以初始为选中状态。
7、列表 列表的作用与下拉列表相似,但显示的外观不同,列表在浏览器里显示时列出部分或全部选项,另外列表允许访问者选择一个或多个 项目。
定义多选列表框的语法如下:
<select name="from" size="3" multiple> <option value="henan">河南 </option> <option value="hebei">河北 </option> <option value="beijing" selected>北京 </option> </select>
与下拉列表相似, <select>多了两个属性:size和multiple。size用来设定列表中显示的选项个数;加入multiple属性允许用户从列表 中选择多项。
8、文件域 文件域使用户可以选择其计算机上的文件,如字处理文档或图形文件,并将该文件上传到服务器。文件域的外观与文件框相似,只是 文件域还包含一个“浏览”按钮。用户可以手动输入要上传的文件的路径,也可以使用“浏览”按钮来定位并选择文件。如果要上传 文件,需要注意的是, <form>的 method属性必须设置为post,另外, <form>必须加上属性enctype="multipart/form-data"。 定义文件域的语法为:
<input type="file">
文件域除type属性外其它属性与文本的相同。
9、隐藏域 隐藏域用来存储并提取非用户输入信息,该信息对用户而言是隐藏的。隐藏域不在浏览器中显示任何外观。定义隐藏域的语法为:
<input type="hidden" name="名称" value="值">
name属性用来指定名称,
value属性用来指定传输的值。
10、文本区域/编辑框 文本区域可以使用户输入多行信息,例如,输入留言、自我介绍等。定义文本区域的语法为:
<textarea name="名称" cols="列数" rows="行数" wrap="方式"> 默认文本 </textarea>
开始标记与结束标记之间的文本为初始值,可以为空,但结束标记一定要有且正确。 <textarea>常用属性有: (1)name:用来指定文本区域的名称。 (2)rows:用来指定文本区域能够显示的行数,也就是文本区域的高度。 (3)cols:用来指定文本区域能够显示的列数,也就是文本区域的宽度。 (4)wrap:用来指定当用户在一行中输入的信息较多,无法在定义的文本区域内显示时,如何显示用户输入的信息。可取属性有: off:防止文本换行到下一行。当用户输入的内容超过文本区域的右边界时,文本将向左侧滚动。用户必须按回车才能将插 入点移到文本区域的下一行 。 physical:在文本区域设置自动换行。当用户输入的内容超过文本区域的右边界时,文本换行到下一行。当提交数据进行 处理时,这些数据中包含自动换行时产生的换行符。 virtual:在文本区域中设置自动换行。当用户输入的内容超过文本区域的右边界时,文本换行到下一行。当提交数据进行 处理时,自动换行并不应用于数据,数据作为一个字符串进行处理。
11、提交按钮 提交按钮用来将表单数据提交到服务器。定义表单的语法为:
<input type="submit" name="名称" value="显示文字" title="标题">
除type外其它常用属性有: (1)value:用来指定按钮上显示的文本。 (2)name:用来指定按钮的名称。
(3)title:提示信息,当鼠标移动到按钮上时显示的按钮提示信息。
<form name="form1" method="post" action="deal.jsp"> <input type="submit" name="Submit" value="提交" title="单击按钮则提交表单"> </form>
Submit按钮提交后对应的操作:form表单的action属性里的值所对应的操作。
12、重置按钮 重置按钮用来还原表单为初始状态。定义重置按钮的语法为:
<input type="reset" name="名称" value="显示文字" title="标题">
重置按钮除type属性外其它属性与提交按钮的相同。
13、普通按钮 普通按钮在不添加脚本的情况下,只呈现一个按钮的外观,单击后没有任何动作。普通按钮通常用来跟JavaScript脚本相结合产生特 定的动作。定义普通按钮的语法为:
<input type="button" onclik="Javascript代码|操作函数">
普通按钮除type属性外其它属性与提交按钮的相同。
14、图像按钮 图像按钮就是用图像作为按钮图标,来实现按钮的功能。定义图像按钮的语法为:
<input type="image" name="名称" src="图片文件路径" onclik="Javascript代码|操作函数">
图像按钮除type外其它常用属性有: (1)name:用来指定图像按钮的名称。 (2)src:用来指定要为该按钮使用的图像,属性值为图像文件的相对路径或绝对路径。 (3)alt:用于输入描述性文本,一旦图像在浏览器中载入失败,将显示文本。 (4)width:用来设定图像的高度。 (5)height:用来设定图像的宽度。
浙公网安备 33010602011771号