美文网首页
Form表单小结

Form表单小结

作者: 字母31 | 来源:发表于2017-10-15 20:09 被阅读0次

1、form表单作用以及属性

Form表单是HTML里面用来创建一个表单,用来与后台服务器或者其他页面实现数据交互。具有以下属性:
action:提交数据的地址,用来存储或者处理数据的URL
method:用何种http方式来提交数据,一般为get和post
target:一个名字或者关键字用来显示提交后显示的页面
autocomplete :input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的
enctype:当method属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型

2、常见input标签以及作用

常见的Input标签主要由type属性控制。如果这个属性没有指定,默认的类型是 text。
button:无行为的按钮
checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
color:HTML5 用于指定颜色的控件。
date:HTML5 用于输入日期的控件(年,月,日,不包括时间)。
datetime:HTML5 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
datetime-local:HTML5 用于输入日期时间控件,不包含时区。
email:HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
file:此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
hidden:不显示在页面上的控件,但它的值会被提交到服务器。
image:图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
month:HTML5 用于输入年月的控件,不带时区。
number: HTML5 用于输入浮点数的控件。
password:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
radio:单选按钮。必须使用 value 属性定义此控件被提交时的值。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
range:HTML5 用于输入不精确值控件。
reset:用于将表单所内容设置为缺省值的按钮。
search:HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
submit:用于提交表单的按钮。
tel:HTML5 用于输入电话号码的控件
text:单行字段;换行会将自动从输入的值中移除。
time:HTML5 用于输入不含时区的时间控件。
url:HTML5 用于编辑URL的字段。
week:HTML5 用于输入一个由星期-年组成的日期,日期不包括时区。

3、get和post区别

a)本质就是语义的不同
b)post有消息体而get没有
c)post的URL没有查询参数,而get有。URL有长度限制,get有可能会报414错误
d)post相对于get来说安全一些

4、在input里,name 有什么作用?

表单提交的数据一般都是以key:value的形式,name就是来说明提交数据的key值,方便后来存储调用处理。

5、placeholder 属性有什么作用?\

placeholder属性一般会在输入框有一个提示,该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

6、type=hidden隐藏域有什么作用?

作用:隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

7、其它相关

a)表单中readonly和disabled属性的区别
设置了readonly的input[text]在提交表单的时候还是会提交input上声明的数据。
设置了disabled的则不会提交input上声明的数据。
b)表单提交文件的正确方式
添加input[type=file]的input标签
设置表单的method为post
设置表单的enctype为multipart/form-data
c)如何无刷新提交表单
在页面设置一个iframe,设置好它的name属性值,用css控制他是'消失'的。
设置form的target属性为iframe的name属性即可。
d)默认情况下,form中的button按钮不声明type属性,则一律视为submit。

相关文章

  • Form表单小结

    1、form表单作用以及属性 Form表单是HTML里面用来创建一个表单,用来与后台服务器或者其他页面实现数据交互...

  • 关于vue v-decorator

    ant-desigin-vue中form表单的使用 form表单的使用 form表单之获取表单的数据 创建表单 通...

  • bootstrap表单

    bootstrap表单 1、form 声明一个表单域2、form-inline 内联表单域3、form-horiz...

  • Vue.js-ElementUI表单

    1 表单el-form 每个表单el-form由多个表单域el-form-item组成。默认情况,表单域是垂直分布...

  • HTML-Form知识点小结

    本博客著作权归从这到那所有,转载请注明出处 HTML-Form知识点小结 1.form表单有什么作用?有哪些常用的...

  • Form表单、四种常见的POST请求提交数据方式、MIME【转】

    浏览器行为:Form表单提交 1、form表单常用属性 enctype为form表单数据的编码格式,Content...

  • Ant Design form 表单赋值,清空

    1:表单清空:this.form.resetFields();2:表单赋值:this.form.setFields...

  • bootstrap直接对form表进行校验

    form表单可以前端进行校验,当然也可以直接采用bootstrap对form表单进行校验如form表单中有 等相关...

  • 任务五——task01

    Form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 1. Form表单的作用: Form表单是...

  • 02_html&css

    HTML 表单标签

    form标签属性action:表单提交的路径,可以是html,也可以...

网友评论

      本文标题:Form表单小结

      本文链接:https://www.haomeiwen.com/subject/kvwcuxtx.html