表单
表单标记
基本语法：<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 | 设置预选列表项 |
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
