HTML <form>标签,定义表单,常用属性简介

<form>标签

<form>标签可以用来定义HTML文档中的表单。而什么是表单,有什么用,在web前端的编程中,什么时候会用到form表单呢?可以参考下方的“form使用场景”:

form表单使用场景

用户通过浏览器向web服务器发送请求的方法中,除了使用url,即网址之外,还可以使用表单来向web服务器发送请求,比如用户通过登录界面,向服务器发送登录的请求,只要输入的用户名和密码与数据库中的相匹配,web服务器便会发送相应的请求响应页面回浏览器端。而实际上,表单也是通过url的方式来向服务器发送请求,为什么呢。这跟form的action属性有关(可以结合下方的实例)。

<form></form>

提示:form是块元素,包含起始标签和结束标签。


form表单实例代码,及在线编辑器

<form action='https://www.x1y1z1.com/search'method='get' target='_blank'>
  <input type='text' name='qsearchword'>
  <input type='submit' value='站内搜索'>
</form>
<br>
<form rel='nofollow' action='https://www.baidu.com/s'method='get' target='_blank' >
  <input type='text' name='wd'>
  <input type='submit' value='站外搜索'>
</form>

实例代码解析

如上代码,简单地实现了两个搜索框,一个是站内搜索,一个是站外搜索,两个最大的不同的地方在于action的url地址。也就是说,form表单之所以能够向不同的服务器发送请求,是因为action中的url地址,即表单也是通过url地址,然后携带用户输入的数据向url地址指向的服务器发送请求。


form表单常用属性简介

上面的实例中,出现了method、action、target等属性,接下来将接单地介绍一下:

参数描述
actionurl指定表单发送请求的服务器地址
methodget or post指定表单发送数据的HTTP方法,一般情况下,get方法不修改数据库,post则可用于修改数据库
target_blank、_self、_parent、_top、framename指定浏览器端接收从服务器发回来的响应的打开位置
relexternal、help、license、next、nofollow、noopener、noreferrer、opener、prev、search指定url所连接的资源与当前HTML文档的关系
name自定义指定表单的名称

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.