HTML form表单问题
2017-09-24 本文已影响0人
饥人谷_Coziz
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- <form> 标签用于为用户输入创建 HTML 表单，表单能够包含文本字段、复选框、单选框、提交按钮等等，表单用于向服务器传输数据。
- type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件， 家庭住址等等，是Input的默认类型。
type=password
密码输入框，当在此输入框输入信息时显示为保密字符。
type=file
提供了一个文件目录输入的平台。
type=hidden
隐藏域，如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
type=button
按钮，要让按钮跳转到某个页面上还需要加入写JavaScript代码。
type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。
type=radio
单选框，出现在多选一的页面设定中。
type=image
将图片作为提交按钮。
type=submit
提交按钮，将Form中所有内容进行提交action页处理。
type=reset
充值按钮，清空表单所有填写内容。
post 和 get 方式的区别？
- get安全性非常低，post安全性较高。
- get是从服务器上获取数据，post是向服务器传送数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP的post机制，将表单内各个字段与其内容放置在HTML的header内一起传送到action属性所指的URL地址。用户看不到这个过程。
- get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
- 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
在input里，name 有什么作用？
name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
radio 如何 分组?
在input中设置name属性，name相同的位同一个组。
placeholder 属性有什么作用?
提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
type=hidden隐藏域有什么作用? 举例说明
在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。隐藏域在页面中对于用户是不可见的，但当用户提交信息的时候，隐藏域的信息也被一起发送到服务器。例如：在提交表单信息时，隐藏域的数据可以验证用户身份，若隐藏域信息与后台数据一致，则通过身份验证。
HTML 表单的用法
表单的定义
表单是一个包含表单元素的区域。表单元素允许用户在表单中输入信息的元素。表单使用表单标签(<form>)定义。HTML中的表单是HTML页面与浏览器端实现交互的重要手段。利用表单，服务器可以收集客户端浏览器提交的相关信息，比如输入的密码等等。
form标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | 规定能够通过文件上传进行提交的文件类型，HTML 5 中不支持 |
| accept-charset | charset_list | 规定服务器可处理的表单数据字符集 |
| action | URL | 规定当提交表单时向何处发送表单数据 |
| autocomplete | on/off | 规定表单是否应该启用自动完成功能 |
| enctype | 见说明 | 规定在发送到服务器之前应该如何对表单数据进行编码 |
| method | get/post | 规定如何发送表单数据 |
| name | form_name | 规定表单的名称。 |
| novalidate | novalidate | 规定当提交表单时不对其进行验证 |
| target | _blank/_self/_parent/_top/framename | 规定在何处打开 |
说明
enctype 属性可能的值：
- application/x-www-form-urlencoded（在发送前编码所有字符）
- multipart/form-data（不对字符编码，在使用包含文件上传控件的表单时，必须使用该值）
- text/plain（空格转换为 "+" 加号，但不对特殊字符编码）
常用的表单元素
- 文本域
<input type="text" name="text" value="" /> - 密码域
<input type="password" name="text" value="" /> - 单选按钮
男人:<input type="radio" name="sex" value="male" /> Male
<br />
女人：<input type="radio" name="sex" value="female" /> Female
- 复选框
<input type="checkbox" name="check1" value="" /> - 按钮
<input type="button" value="确认" /> - 重置按钮
当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。
<input type="reset" value="重置" /> - 提交按钮
当点击提交按钮时，浏览器将自动提交表单。
<input type="submit" value="提交" /> - 隐藏域
隐藏域在浏览器中并不显示。
<input type="hidden" value="我是一个隐藏域" /> - 文件上传域
<input type="file" value="" /> - 图片按钮
<input type="image" src="123.gif" /> - 下拉列表
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
- label
label 元素不会向用户呈现任何特殊效果。设置for属性，点击label内的文字也会触发单选按钮。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
- 文本区域
用户可在此文本区域中写文本。在一个文本区中，可输入无限数量的文本。
<textarea cols="10" rows="10">我是一个文本区域</textarea>
form表单Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<form action="">
<div>
<label for="userName">姓名：</label>
<input type="text" id= "userName" name="userName" placeholder= "用户名">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id= "password" name="password">
</div>
<div>
<label>性别：</label>
<input type="radio" id="male1" name="sex" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female1" name="sex" value="female">
<label for="female">女</label>
</div>
<div>
<label>取向：</label>
<input type="radio" id="male2" name="orientation" value="male">
<label for="male">男</label>
<input type="radio" id="female2" name="orientation" value="female">
<label for="female">女</label>
</div>
<div>
<label>爱好：</label>
<input type="checkbox" id="game" name="hobby">
<label for="game">游戏</label>
<input type="checkbox" id="tourism" name="hobby">
<label for="tourism">旅游</label>
<input type="checkbox" id="movies" name="hobby">
<label for="movies">电源</label>
</div>
<div>
<label>评论：</label>
<textarea name="comment" cols="30" rows="15" placeholder= "请输入"></textarea>
</div>
<div>
<label>我的Car：</label>
<select name="myCar" id="myCar">
<option value="奔驰">奔驰</option>
<option value="宝马">宝马</option>
<option value="奥迪">奥迪</option>
</select>
<input type="submit">
</div>
</form>
</body>
</html>
