表单
表单标记
基本语法:<form></form>
标记为成对标记以<form>
开始,以</form>
结束,表单定义了采集数据的范围,其所包含的数据内容将被完整的提交给服务器。
语法说明:name、action、method、action、entype等
属性 | 值 | 说明 |
---|---|---|
name | name | 规定表格的名称 |
action | url | 规定当提交表单时,向何处发送表单数据 |
method | get|post | 规定如何发送表单数据。post方法主要包含名称/值对,并且无需包含于action属性的URL中。(推荐使用安全)get方法把名称和值对加在action的URL后面并且把新的URL送至服务器不推荐使用(不安全) |
entype | MIME_type | 规定表单数据在发送到服务器之前如何编码 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的使用实例</title>
</head>
<body>
<form name="forml" method="post" action="form_action.jsp" enctype="text/plain">
<h3> 输入课程成绩</h3>
姓名:<input type="text"><br>
高等数学:<input type="text" size="15"/><br>
大学物理:<input type="text" size="15"/><br>
<input type="submit" value="成绩提交"/>\
<input type="reset" value="成绩重置"/>
</form>
</body>
</html
定义域和域标题
fieldset
标记可以在网页上定义域,在表单中使用域可以将表单的相关元素进行分组,将表单的一部分内容打包,生成一组相关表单的字段,浏览器会以特殊的方式显示(特殊边界、3D效果或者创建一个子表单处理元素)
<legend>
为<filedset>
标记定义域标题。
基本语法:
<form>
<fieldset>
<legend align="center">基本信息 </legend>
</fieldset>
</form>
表单的使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义域和域标题实例</title>
</head>
<body>
<form>
<fieldset>
<legend align="center">基本信息</legend>
姓名:<input name="name" type="text">
性别:<input name="sex" type="text">
</fieldset>
<fieldset>
<legend align="center">其他信息</legend>
身高:<input name="height" type="text">
体重:<input name="weight" type="text">
</fieldset>
</form>
</body>
</html>
显示效果:
表单信息输入
基本语法:<imput name="" type=""/>
属性说明:
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input元素的名称 |
type | text|password checkbox|radio image|submit reset|button file|hidden | 规定input元素的类型。 text:单行文本输入框; password:密码输入框; checkbox:复选框; radio:单选按钮; image:图像按钮; submit:提交按钮; reset:重置按钮; button:普通按钮; file:文件选择框; hidden:隐藏框 |
单行文本输入框
input
的type属性为text,输入的数据只能单行显示,不能换行。
基本语法
<input name="" type="text" maxlenght="" size="" value="" readonly/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input元素的名称 |
maxlenght | number | 规定输入字段中的字符的最大长度 |
size | number_of_char | 定义输入字段的宽度。其值小于等于最大长度 |
value | value | 规定input元素的默认值 |
readonly | readonly | 规定文本框的内容只读,不能修改和编辑 |
密码输入框
input
的type属性为password,数据不是显式显示,被字符“●”取代。
<input name="" type="password" maxlenght="" size=""/>
属性说明:
属性 | 值 | |
---|---|---|
name | name | 定义input标记的名称 |
maxlength | number | 规定输入字段中的字符的最大长度 |
size | number_of_char | 定义输入字段的宽度。其值小于等于最大长度 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文本输入框实例</title>
</head>
<body>
<h4>用户输入信息</h4>
<form>
用户名:<input type="text" name="chu" maxlength="20" size="10"><br>
身 份:<input type="text" name="" readonly value="学生"><br>
密 码:<input type="password" name="psw" maxlength="20" size="10">
</form>
</body>
</html>
复选框
input
的type属性为checkbox,可以实现向表中插入一个复选框
基本语法
<input name="" type="checkbox" value="" checked="checked"/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
value | value | 规定input标记的值 |
checked | checked | 预先规定复选框 |
单选按钮
input
的type属性为radio,可以实现向表单中插入一个单选按钮,利用单选按钮在网页上为某一选择设置多个选项。
<input name="" type="radio" value="" checked="checked"/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
value | value | 规定input标记的值 |
checked | checked | 预先定义单选按钮 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框与单选按钮的应用</title>
<style type="text/css">
</style>
</head>
<body>
<form>
<fieldset>
<legend>填写个人信息</legend>
姓名:<input type="text" name="xm" maxlength="10" size="10"><br>
爱好:<input type="checkbox" name="c1" value="读书">读书
<input type="checkbox" name="c1" value="唱歌" checked="checked">唱歌
<input type="checkbox" name="c3" value="游戏" checked="checked">游戏<br>
性别:<input type="radio" name="sex" value="male" checked="checked">男性
<input type="radio" name="sex" value="female">
</fieldset>
</form>
</body>
</html>
显示效果
图像按钮
input
的type属性为image,实现向表单中加入一个图像按钮,通过src加载图像。
基本语法
<input name="" type="image" src="" width="" height=""/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
src | URL | 定义以提交按钮形式显示的图像的URL |
width | width | 定义图像的宽度,单位为像素 |
height | height | 定义图像的高度,单位为像素 |
提交按钮
input
的type属性为submit,可以实现想表单加入一个提交按钮,提交按钮用于将表单的信息提交至服务器处理。
基本语法
<input name="" type="submit" value="提交"/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
value | value | 定义input标记的值 |
重置按钮:
input
的type属性为reset,实现向表单插入一个重置按钮,用于将表单中所有的输入信息清空,然后让用户可以重新填写。
基本语法
<input name="" type="reset" value="">
普通按钮
input
的type属性为button,实现向表单中插入一个普通按钮,如果不通过表单按钮来处理事件,则可以给普通按钮绑定事件代码,来实现所需功能。
基本语法
<input name="" type="button" value="" onclock=""/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
value | value | 规定input标记的值 |
onclick | 事件代码 | 绑定事件代码、自定义函数或直接使用脚本代码 |
文件选择框
input
的type属性值为file,向表单中插入一个文本框。
基本语法
<input name="" type="file">
属性说明
页面上会自动添加一个文本输入框和一个“浏览…”按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件,然后件文件名称填到文本输入框中,但并没有做任何其他操作哦。
隐藏框
input
的type属性值为hidden向表单中插入一个隐藏框,用户提交信息时,隐藏框中的信息也一并被提交到服务器,但隐藏框在网页中是不可见的。
基本语法
<input name="" type="hidden" value=""/>
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义input标记的名称 |
value | value | 规定input标记的值 |
多行文本输入框
基本语法
<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>
<textarea rows="" cols="" wrap="soft|hard"/></textarea><!--HTML5定义-->
属性说明
属性 | 值 | 说明 |
---|---|---|
name | name | 定义textarea标记的名称 |
rows | number | 规定文本区内的可见行数 |
cols | number | 规定文本区内的可见宽度 |
wrap | wrap|virtual physical|off | wrap属性规定当在表单中提交时,文本区域中的文本如何换行 wrap—文本区会包含一行文本,用户必须将光标一定到右边,才能看见全部文本,这是将把一行文本传送给服务器; virtual—将实现文本区内自动换行,但在传输给服务器时,文本只在用户按下Enter键的地方换行,其他地方没有换行的效果。;physical—将实现文本框内自动换行,并以这种形式传送给服务器;off—不会自动换行,输入内容超出文本区右界时,文本将向左滚动,必须按下Enter键才能将插入点移动到下一行。 HTML5中,soft表示提交时不换行,hard表示提交时换行。 |
下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select
和option
标记来在表单中插入下拉菜单和列表项。
基本语法
<select name="" size="" multiple>
<option value="" secleted>文字信息</option>
<option value=""></option>
...
</select>
属性说明
标记名称 | 属性 | 值 | 说明 |
---|---|---|---|
select | name | name | 定义select标签的名称 |
select | size | number | 规定下拉列表框中可见的项目 |
select | multiple | multiple | 规定课选择多个选项 |
option | value | value | 规定列表项的值 |
option | selected | selected | 设置预选列表项 |