HTML-form表单相关概念
form表单有什么作用?有哪些常用的input标签,分别有什么作用?
表单用于向服务器传送数据。
常见的input标签:
- <input type="text"> 创建一个文本输入框,单行输入。
- <input type="password"> 同type="text”,但是输入的内容显示成小圆点
- <input type="checkbox"> 创建一个复选框,可以勾选多个
- <input type="radio"> 创建一个单选按钮,只能够选一个
- <input type="file"> 创建一个上传文件按钮,可以上传文件,通过添加accept属性可以限制文件上传种类
- <input type="hidden"> 通过添加属性(value,name等)使得这些属性以隐藏的形式传送到服务器
- <input type="submit"> 创建一个提交按钮,可以通过value编辑按钮要显示的文字
- <input type="reset"> 创建一个重置按钮,可以通过nvlue编辑按钮要显示的文字
- <iinput type="button"> 创建一个按钮,没有作用,可以通过nvlue编辑按钮要显示的文字
post和get 方式的区别
post和get是form标签中method属性的值,method属性可设置或返回用于表单提交的 HTTP 方法。
-
Get是从服务器上得到数据,而Post是往服务器传送数据。
-
Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。
-
由于URL的长度有限制,所以Get能传送的数据量很小,而Post没有这个限制,传送的数据量较大。
-
由于Get在URL中可以看到提交到表单中的数据,使得其安全性很差,而Post的传送是不可见的,安全性相对高。
-
Get限制Form表单收集的数据的值必须为ASCII,而Post支持整个ISO10646字符集。
在input中,name有什么作用?
name即命名,规定input元素的名称,用于对提交到服务器的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据,特别的,只有设置了name属性的表单元素才能在提交表单时传递他们的值。
radio如何分组?
例:<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
首先type="radio",表示创建一个单选按钮,name="sex",给这个元素命名,以便提交表单时能传递这个值,value="boy",设置这个元素在传递到服务器时的值的名称,“男”,写在标签外,在浏览器中显示在单选按钮旁边,告诉用户信息。若是有很多选择,每一个写一个<input type="radio">。
若是有多个不同的问题需要单选,各个问题之间用<div></div>,即各个问题单独为一块。
placeholder属性有什么作用?
在文本框中显示一行文字,当用户输入的时候,文字会消失,一般这行文字可以提示用户输入规则和内容。
type="hidden"隐藏域有什么作用?举例说明。
<input type="hidden"> 通过添加属性(value,name等)使得这些属性以隐藏的形式传送到服务器。
用于确认用户的身份。例:
<form action="URL" method="post">
<div class="textarea">
<textarea name="artical" placeholder="你可以在这里写东西"></textarea>
<input type="hidden" name="这里是隐藏的" value="123456">
<input type="submit" value="提交">
</div>
</form>
如果有<input type="hidden">当用户提交后,可以在右下角看到“这里是隐藏的:123456”这句话
而如果没有<input type="hidden">,提交后就没有那行文字,
例2.png可以看到,虽然在浏览器的界面是没有“这里是隐藏的:123456”这句话,但是提交的时候如果加上<input type="hidden">,那么这个属性值就会被上传到服务器,这样,就可以确认用户的身份。