美文网首页
HTML-form表单相关概念

HTML-form表单相关概念

作者: 虚玩玩TT | 来源:发表于2017-04-01 16:28 被阅读0次

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 方法。

  1. Get是从服务器上得到数据,而Post是往服务器传送数据。

  2. Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。

  3. 由于URL的长度有限制,所以Get能传送的数据量很小,而Post没有这个限制,传送的数据量较大。

  4. 由于Get在URL中可以看到提交到表单中的数据,使得其安全性很差,而Post的传送是不可见的,安全性相对高。

  5. 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”这句话

例1.png

而如果没有<input type="hidden">,提交后就没有那行文字,

例2.png

可以看到,虽然在浏览器的界面是没有“这里是隐藏的:123456”这句话,但是提交的时候如果加上<input type="hidden">,那么这个属性值就会被上传到服务器,这样,就可以确认用户的身份。

相关文章

  • HTML-form表单相关概念

    form表单有什么作用?有哪些常用的input标签,分别有什么作用? 表单用于向服务器传送数据。 常见的input...

  • HTML-Form表单

    form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于为用户输入创建 HTML 表单。表...

  • HTML-Form表单

    form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于搜集不同类型的用户输入,...

  • HTML表单 -- 相关概念

    1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单是一个包含表单元素的区域,允许用...

  • HTML-form表单学习笔记

    一. post和get方式提交数据的区别 安全性:get提交的数据url可以看得到,post看不到,并且get提交...

  • HTML表单相关概念

    1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 通俗的讲 form标签是用来进行表单提...

  • HTML表单相关概念

    1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 通俗的讲 form标签是用来进行表单提...

  • HTML-Form知识点小结

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

  • 5. JavaScript开发基础——CSS知识

    5.1 CSS的相关概念 CSS 是英文 Cascading Style Sheets(层叠样式表单)的缩写,通常...

  • 表单相关

    1.自定义验证器 1.1 行内验证器 当表单类中包含以'validate_字段属性名'形式命名的方法时,在验证字段...

网友评论

      本文标题:HTML-form表单相关概念

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