1 认识表单
表单主要同于收集网页浏览者的相关信息,用。使用语法如下:
<from action="url" method="get|post" enctype="mime"></from>
- action:用于处理提交表单的格式,它可以是一个URL地址或一个电子邮箱地址。
- method:指明提交表单的HTTP方法。
- enctype:指明用来把表单提交给服务器得到互联网媒体形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识表单</title>
</head>
<body>
<form>
下面是输入用户信息
<br>
用户名称
<input type="text" name="user">
<br>
用户密码
<input type="password" name="password">
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
2 表单的基本元素的使用
2.1 单行文本输入框text的使用
文本框用于访问者输入内容的表单对象,用来填写单个字或者简短的回答,如用户姓名和地址等。
<input type="text" name="..." size="..." maxlength="..." value="...">
属性值 | 说明 |
type=“text” | 定义单行文本框 |
name | 定义文本框的名称,保证数据的准确采集,必须定义一个独一无二的名称 |
size | 定义文本框的宽度,单位为单个字符宽度 |
maxlenth | 定义最多输入的字符数 |
value | 定义文本框的初始值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行输入文本框</title>
</head>
<body>
<from>
请输入您的姓名:<br>
<input type="text" name="yourname" size="10" maxlength="20" value="张山"><br>
请输入您的地址:<br>
<input type="text" name = "adress" size="20" maxlength="20" value="北京">
</from>
</body>
</html>
2.2 多行文本框textarea的使用
代码格式:
<textarea name="..." cols="..." rows="..." wrap="..."></textarea>
属性值 | 说明 |
name | 定义多行文本框的名称,保证数据的准确采集,必须定义一个独一无二的名称 |
cols | 定义多行文本框的宽度,单位是单个字符宽度 |
rows | 定义多行文本框的高度,单位是单个字符宽度 |
wrap | 定义输入内容大于文本域时显示的方式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行文本输入框</title>
</head>
<body>
<from>
请输入您的评价:<br>
<textarea name="yourattiude" cols="50" rows="5" wrap="soft"></textarea>
<br>
<input type="submit" value="提交">
</from>
</body>
</html>
2.3 密码域password的使用
用于输入一些保密信息,输入时显示一些黑点或其它符号,增加输入文本的安全性。语法如下:
<input type="password" name="..." size="..." maxlenth="...">
属性值 | 说明 |
type=“password” | 定义密码框 |
name | 定义密码框的名称,保证唯一性 |
size | 定义密码框的宽度,单位是单个字符的宽度 |
maxlength | 定义最多输入的字符数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置密码输入框</title>
</head>
<body>
<from>
用户名:<br>
<input type="text" size="20" maxlength="20" name="username" >
<br>
登录密码:
<br>
<input type="password" name="password" size="20" maxlength="20" >
</from>
</body>
</html>
2.4 单选按钮radio的使用
单选按钮主要是在网页浏览者在一组选项中只能选择一个选项。其使用方法如下:
<input type="radio" name="" value="">
属性值 | 说明 |
type=“radio” | 定义单选按钮 |
name | 定义单选按钮名称,单选按钮都是以组为单位,在同一组中的单选都必须用同一名称 |
value | 定义单选按钮的值,在同一组中,他们的域值必须是不同的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置单选按钮</title>
</head>
<body>
<from>
选择感兴趣的书:<br>
<input type="radio" name="book" value="1">Python<br>
<input type="radio" name="book" value="2">C++<br>
<input type="radio" name="book" value="3">java<br>
<input type="radio" name="book" value="4">html<br>
</from>
</body>
</html>
2.5 复选框checkbox的使用
复选框主要是让访问者在同一组选项中可以选择多个选项。每个复选框都是一个独立元素,都必须有一个唯一的名称。语法如下:
<input type="checkbox" name=" " value=" ">
属性值 | 说明 |
type=“checkbox” | 定义复选框 |
name | 定义复选框的名称,在同一组中复选框都必须用同一名称 |
value | 定义复选框的值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置复选框</title>
</head>
<body>
<from>
选择感兴趣的方面:<br>
<input type="checkbox" name="habbit" value="1">游泳<br>
<input type="checkbox" name="habbit" value="1">健身<br>
<input type="checkbox" name="habbit" value="2">健身<br>
<input type="checkbox" name="habbit" value="3">健身<br>
<input type="checkbox" name="habbit" value="4">健身<br>
</from>
</body>
</html>
2.6 下拉列框select的使用
用于有限的空间设置多个选项。下拉列表框既可以单选,又可以用作复选。使用语法如下:
<select name=".." size=".." multiple>
<option value=".." selected>
...
</option>
...
</select>
属性值 | 说明 |
name | 定义下拉列表框的名称 |
size | 定义下拉列表框的行数 |
multiple | 表示可以多选,如不设置,则只能单选 |
value | 定义选择项的值 |
selected | 表示默认已经选择本选项 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置下拉列表框</title>
</head>
<body>
<from>
选择感兴趣的类型:
<select name="cc" size="3" multiple>
<option value="1" selected>网站开发1</option>
<option value="2" selected>网站开发2</option>
<option value="3" >网站开发3</option>
<option value="4" >网站开发4</option>
<option value="5" selected>网站开发5</option>
</select>
</from>
</body>
</html>
注:按住Ctrl键实现多选。
2.7 普通按钮button的使用
控制其他定义了处理脚本的处理工作,代码如下:
<input type="button" name=" " value=" " onClick=" ">
属性值 | 说明 |
type=“button” | 定义普通按钮 |
name | 定义普通按钮名称 |
value | 定义按钮显示的文字 |
onClick | 表示单击行为,也可以为其他事件,通过制定脚本函数来定义按钮行为 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置普通按钮</title>
</head>
<body>
<form>
点击下面按钮,把文本框1的内容拷贝到文本框2的内容中:
<br>
文本框1:<input type="text" id="1" value="学习HTML的技巧">
<br>
文本框2:<input type="text" id="2" value="学习HTML的技巧">
<br>
<input type="button" value="单击我" onclick="document.getElementById(2).value=document.getElementById(1).value">
</form>
</body>
</html>
2.8 提交按钮submit的使用
将输入的信息提交到服务器,格式如下:
<input type="submit" name=".." value="..">
属性值 | 说明 |
type=“submit” | 定义提交按钮 |
name | 定义提交按钮的名称 |
value | 定义提交按钮显示的文字 |
通过提交按钮可以将表单里的信息提交到表单里action所指向的文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入用户信息</title>
</head>
<body>
<from action="http://www.yinhangit.com/yonghu.asp" method="get">
请输入你的姓名:
<input type="text" name="yourname"><br>
请输入你的住址:
<input type="text" name="youradr"><br>
请输入你的pho:
<input type="text" name="ponumber"><br>
请输入你的单位:
<input type="text" name="yourwork"><br>
<input type="submit" value="提交">
</from>
</body>
</html>
2.9 重置按钮reset的使用
重置按钮用来重置表单的输入信息,格式如下:
<input type="reset" name=" " value="">
属性值 | 说明 |
type=“reset” | 定义重置按钮 |
name | 定义重置按钮名称 |
value | 定义重置按钮显示文字 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重置</title>
</head>
<body>
<form>
请输入用户名称:<input type="text"><br>
请输入用户密码:<input type="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>
3 表单高级元素的使用
3.1 url属性的应用
url属性用于说明网站网址的,显示为一个文本段输入URL地址,提交表单时,会自动验证url的值。其使用格式如下:
<input type="url" name="userurl">
属性值 | 说明 |
type=“url” | 定义url输入框 |
max(min) | 设置属性最大(小)值 |
value | 规定默认值 |
step | 设置合法的数字间隔 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL属性的应用</title>
</head>
<body>
<from>
请输入网址:
<input type="url" min="8" max="50" name="userurl" value="http://www.baidu.com">
<input type="submit" name="enter" value="确认">
</from>
</body>
</html>
3.2 email属性的应用
与url类似,email属性用于让浏览者输入email地址,提交表单时会自动验证email域的值。
3.3 date属性和time属性的应用
属性 | 含义 |
date | 选取日、月、年 |
month | 选取月、年 |
week | 选取周年 |
time | 选取时间 |
datetime | 选取时间、日、月、年 |
datetime-local | 选取(本地)时间、日、月、年 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运用时间</title>
</head>
<body>
<from>
<br>
选择商品购买的时间
<br>
<input type="datetime-local" name="user_date">
</from>
</body>
</html>
3.4 number属性的应用
提供数字输入类型,用户可以直接输入数字或者通过单击微调框中国的向上或者向下按钮选择数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用nuber属性</title>
</head>
<body>
<form>
此网站我曾来过
<input type="number" name="sz" min="0" max="10" step="3">次了!
</form>
</body>
</html>
3.5 range属性的应用
是一个滚动的控件,与number属性类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用nuber属性</title>
</head>
<body>
<form>
此网站我曾来过
<input type="range" name="sz" min="0" max="10" step="1">次了!
</form>
</body>
</html>
注:默认情况置于中间,若指定最大最小值,则允许反向滚动轴。目前浏览器对这一属性还不能很好的支持。
3.6 required属性的应用
规定必须在提交前填写区域不能为空,适用于text、serch、url、email、password、date、pickers、number、checkbox和radio等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重置</title>
</head>
<body>
<form>
请输入用户名称:<input type="text" required="required"><br>
请输入用户密码:<input type="password" required="required"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>
4 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重置</title>
</head>
<body>
<h1 align="center" >用户反馈页面</h1>
<form method="post">
<p>姓 名:<input type="text" size="12" maxlength="20" required="required"></p>
<p>性 别:<input type="radio" name="性别" value="male" required="required">男 <input type="radio" name="性别" value="female" required="required">女</p>
<p>年 龄:<input type="number" class=txt name="age" min="0" max="120"></p>
<p>电子邮件:<input type="text" name="email" required="required"></p>
<p>请输入您对该网站的建议:<br>
<textarea name="yourworks" rows="5" cols="50"></textarea><br>
<input type="submit" name="submit" value="登录">
<input type="reset" name="reset" value="重置">
</p>
</form>
</body>
</html>