form表单有什么作用?
form表单用于搜集用户输入并提交至web服务器。
有哪些常用的input 标签,分别有什么作用?
文本/密码
一般不设置value,value值为用户输入的值
-
placeholder属性,用于在输入框内给用户提供提示文字,帮助用户填写输入字段,不影响实际value值。用户输入值后会消失。
<input type="text" name="username" placeholder="请输入用户名"> <input type="password" name="password" placeholder="请输入密码">
单选/复选框
同一组数据的name值需保持相同
label元素的for属性值与关联元素id值保持一致,则点击label 元素内文本,浏览器就会自动将焦点转到和标签相关的表单控件上。
-
必须设置value值,否则选中项的值无法提交
<!--单选框--> <label for="male">男</label><input type="radio" id="male" name="gender" value="0"/> <label for="female">女</label><input type="radio" id="female" name="gender" value="1"/>
<!--复选框--> <label for="swim">游泳:</label><input type="checkbox" id="swim" name="hobby" value="0"/> <label for="basketball">篮球:</label><input type="checkbox" id="basketball" name="hobby" value="1"/> <label for="football">足球:</label><input type="checkbox" id="football" name="hobby" value="2"/>
文件
-
accept属性:可接受的文件类型
<input type="file" accept="image/gif, image/jpeg"/>
-
按钮
<input type="button"> <!--提交给表单处理程序--> <input type="submit"> <input type="reset"> <!--图片按钮--> <input type="image" src="xxx.jpg" alt="Submit Form"/>
隐藏域
-
提交数据但前台不显示
<input type="hidden" name="a" value="1">
post 和 get 方式的区别?
GET方法
查询字符串(名称/值对)是在 GET 请求的 URL 中发送的
受限于url的最大长度2048个字符.
只允许 ASCII 字符。
-
与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分,对所有人可见。因此在发送密码或其他敏感信息时绝不要使用 GET !
/test/demo_form.asp?name1=value1&name2=value2
POST方法
查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的
对数据类型、长度均无限制
-
比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
POST /path/script.cgi HTTP/1.0 From: frog@jmarshall.com User-Agent: HTTPTool/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 32 home=Cosby&favorite+flavor=flies
使用场景
(1)如果表单正在更新数据,或者包含敏感信息(例如密码)时,最好是用POST。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
(2)如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息时使用GET。GET适合少量数据的提交,因为浏览器会设定容量限制。
在input里,name 有什么作用?
用于定义 input 元素的名称,与提交的数据(value)形成一对键值对,一起提交给服务器。它帮助服务器识别输入的数据。
如下面的例子,用户在输入框内输入“xiaoming”并提交后,会向服务器提交name=xiaoming
<input type="text" name="name">
radio 如何分组?
name属性相同的,即为一组。
<input name="name" value="xiaoming">小明
<input name="name" value="xiaohong">小红
placeholder 属性有什么作用?
可在输入框内给用户提供一些提示,帮助用户填写输入字段,不影响实际value值。用户输入值后会消失。
<input type="text" name="name" placeholder="Input your name here">
type=hidden隐藏域有什么作用? 举例说明
隐藏域与其他表单元素一样,用于发送name=value的数据给服务器,但是该标签下的内容在用户看到的页面上无任何显示。
<input type="hidden" name="key" value = "key to be validated">