HTML 表单的基本用法

HTML 表单的基本用法

说起 HTML 中的form表单,大家一定都很熟悉了,这是用于搜集各种用户输入的信息,并让用户提交,增加网站的交互效果,本文就简单介绍一下表单的基本用法。


什么是表单?

表单是一个包含表单元素的区域,用标签<form>来进行定义。表单元素就放在此标签中。

表单代码

zheshitupian
zheshitupian

form有两个常用的属性,action 规定当提交表单时向何处发送表单数据, method 规定用于发送 form-data 的 HTTP 方法。
最常用的HTTP方法是postget

1.表象不同,get把提交的数据url可以看到,post看不到

  1. 原理不同,get 是拼接 url, post 是放入http 请求体中
  2. 提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
  3. get提交的数据在浏览器历史记录中,安全性不好
  4. 场景不同,get 重在 "要", post 重在"给"

可参照form表单的若干疑问、以及HTTP Methods

上图的示例代码中,展示了表单元素<input><label>

其中<input>标签标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
上例中,展示了type属性的两个值,username(用户名)和password(密码),另外<input>元素中还有个属性placeholder,来帮助用户填写输入字段的提示。而name属性,则是定义 input 元素的名称。
效果如下图:

而form表单中,包含的<label>元素标签:

<label> 标签为input元素定义标注(标记)。
label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性, 规定 label 绑定到哪个表单元素,所以应当与相关元素的 id 属性相同。


除了username和password之外,input 的type属性值还有:

属性值 作用
button 定义可点击按钮
checkbox 复选框
file 定义输入字段和 "浏览"按钮,供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
radio 定义单选按钮
reset 定义重置按钮。重置按钮会清除表单中的所有数据
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
email 输入邮箱地址,发送邮件
search 查找文件

下面来为大家一一演示:

单选按钮、复选框、提交按钮
浏览器效果

隐藏输入字段、重置按钮、邮箱、上传文件

细心的你一定会发现,在浏览器中是看不到hidden的隐藏输入字段的,关于hideen 的更多用法,可参照form表单的若干疑问

浏览器效果

好了,以上为大家演示了<input>标签中,type属性不同值的部分常见例子,当然form表单中除了<input><label>标签之外,还有<select><textarea>标签,分别用来定义 下拉列表 以及 多行的文本输入框:

下拉列表、多行的文本输入框
浏览器效果

结束语

其实以上只是展示了冰山一角,form表单实在是还有很多花样和玩法,限于篇幅,这里我就不再挨个为小伙伴演示了,以后更多的实战中,会反复用到表单,另外想要学习更多表单用法的小伙伴,推荐去这里:
W3school:HTML <form> 标签

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 答:form表单用于收集信息,并将信息...
    北城_荒阅读 243评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,933评论 18 139
  • 1.常见的表单元素HTML表单主要用于向服务器端传输用户的数据信息。它可以包含input、menus、textar...
    l_meng阅读 323评论 0 0
  • 什么是HTML表单? 表单是一个包含元素的区域,表单元素是允许用户在表单中(比如:文本域,列表,单选框,复选框等)...
    饥人谷_一叶之秋阅读 308评论 0 0
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 924评论 0 1