Form表单用于用户进行登录,注册,提交等场景,所有要提交的数据都必须放在form标签中 <form action=" " method=" ">;
action:提交地址、动作,与input标签中type标签的submit属性相关联。 <input type="submit" value="提交" />,提交地址是action的地址
method:提交方法,有get和post两种提交方法。
get方法:提交数据可以在URL中看见,
(1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数
(2)URL长度有限制,所以传递的参数数据就有限制
(3)由于数据可以看见,所以不安全
(4)网页默认的请求是get
(5)可以进行资源定位
post方法:
(1) 将form data 保存在http的请求
(2) 没有长度限制
(3) 提交的数据在url是看不到的,比较安全
(4) 往往在开发中用于提交数据form表单提交post
(5) 文件上传 method = post enctype=multipart/form-data
(6)post方式无法做资源定位
表单标签
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> New | 指定一个预先定义的输入控件选项列表 |
<keygen> New | 定义了表单的密钥对生成器字段 |
<output> New | 定义一个计算结果 |
input标签:输入框,其常用属性如下:
name:指定输入框名字,方便提交表格;
value:属性值,文本框内容;
placeholder:可用于文本框默认显示内容;
readonly:只读状态,输入框无法进行文字修改;
disabled:禁用状态;
size:由于输入框是单行的,所以只能设置宽度;
maxlength:限制输入框最大输入的字符个数;
type属性:
text:普通文本,默认属性;
password:文本密码,输入的内容不显示,通常用来设置密码;
submit:提交按钮;
checkbox:复选框,可以进行多项选择;
lable:单选框,多个关联选项name属性保持一致,<labke for=""></lable>:用于关联单选按钮与文字;
hidden:隐藏字段,不会在页面展示;
下拉框
select:下拉选择框,属性可以设置name,每个选项都有一个option,默认选中使用selected
籍贯:<select name="from"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> </select>
文本域
textarea:文本域,可以输入多行文本;
属性:
cols:列数(宽度)
rows:行数(高度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>form表单</title> </head> <body> <form> <!-- 文本框 --> 用户名:<input type="text" placeholder="请输入您的用户名"/> <input type="button" value="请点击"/><br /> 密码:<input type="password" placeholder="请输入您的密码"/> <input type="submit" value="请确认"/> <br /> <input type="hidden" value="隐藏"/> <!-- 复选框 --> 你喜欢什么水果?<br /> 苹果 <input type="checkbox" /><br /> 香蕉 <input type="checkbox" /><br /> 葡萄 <input type="checkbox" /><br /> <!-- 单选框 --> 请选择您的性别: <input type="radio" name="sex" id="nan" value="0"/ checked="a"><label for="nan">男 </label> <input type="radio" name="sex" id="nv"/><label for="nv">女</label> <br /> <!-- 下拉列表 --> 请选择你喜欢的科目: <select size="1" name="form"> <option>语文</option> <option selected="selected">数学</option> <option>英语</option> </select> </form> <!--文本域 --> <textarea cols="20" rows="20">请输入内容</textarea> </body> </html>
g