Form表单

2017-10-18  本文已影响0人  肥鱼666

form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

作用:可以收集用户的信息和反馈意见,提交给服务器数据,是网站管理者与浏览者之间沟通的桥梁。

常用input标签

标签 作用
<input type = "text"> 输入单行文本框
<input type = "radio"> 单选框,用name分组
<input type = "checkbox"> 多选框
<input type = "password"> 输入密码,密码为小圆点
<input type = "submit"> 提交表单数据至服务器的提交按钮
<input type = "botton"> 按钮
<input type = "hidden"> 隐藏域,用户看不见
<input type = "textarea"> 多行文本输入框
<input type = "select"> 下拉选择
<input type = "reset"> 重置按钮,重置表单数据
<input type = "file"> 上传文件
<input type = "date"> 日期

post 和 get 方式的区别?

方式 get post
点击返回/刷新按钮 没有影响 数据会重新发送(浏览器将会提示用户“数据被从新提交”)
添加书签 可以 不可以
缓存 可以 不可以
编码类型(Encoding type) application/x-www-form-urlencoded application/x-www-form-urlencoded or multipart/form-data. 请为二进制数据使用multipart编码
历史记录 没有
长度限制 没有
数据类型限制 只允许ASCII字符类型 没有限制。允许二进制数据
安全性 查询字符串会显示在地址栏的URL中,不安全,请不要使用GET请求提交敏感数据 因为数据不会显示在地址栏中,也不会缓存下来或保存在浏览记录中,所以看起来POST请求比GET请求安全,但也不是最安全的方式。如需要传送敏感数据,请使用加密方式传输
可见性 查询字符串显示在地址栏的URL中,可见 查询字符串不会显示在地址栏中,不可见

在input里,name 有什么作用?

name用于表单提交,只有加了name属性的标签元素才会提交到服务器 。

radio 如何 分组?

radio 根据name 属性分组,相同name的分到一组。

placeholder 属性有什么作用?

placeholder属性能够让你在文本框里显示提示信息(比如请输入密码),一旦你在文本框里输入了,提示信息就会消失。

type=hidden隐藏域有什么作用? 举例说明

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
举例:有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。
参考文章

写一篇博客简单介绍 HTML 表单的用法,附上博客链接

简介
HTML表单是一个包含表单元素的区域,用来收集用户输入的内容并提交。
action :表单提交的地址
method :提交表单的方法,有get和post两种。

常用表单元素

<form action="/getInfo" method="get">
    <input type="radio" name="width" value="70"> 70
    <input type="radio" name="width" value="80"> 80
</form>
<form action="/getInfo" method="get">
    <input type="checkbox" name="width" value="70"> 70
    <input type="checkbox" name="width" value="80"> 80
</form>
<form action="/getInfo" method="get">
    <input type="text"> 
    <textarea></textarea>
</form>
<form action="/getInfo" method="get">
    <input type="password"> 
</form>
<form action="/getInfo" method="get">
    <input type="file"> 
</form>
<form action="/getInfo" method="get">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
    </select>
</form>
<form action="/getInfo" method="get">
    <input type="buttom" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

实现如下表单,附上预览地址。其中性别和取向是单选,爱好是多选

预览

上一篇 下一篇

猜你喜欢

热点阅读