一起自学前端开发!

前端的表格与表单元素---前端入门教程

来源:原创    更新时间:2017-07-31 10:25:19    编辑:前端网编辑    浏览:1843

表单介绍

 

在之前的章节中介绍的标签都是将内容展示给用户看的,那么用户输入要怎么实现呢?

用户要在网上填写信息可以通过表单实现。

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分:

表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单举例:

 QQ截图20170731102453.png

在本阶段的课程中将简单地介绍一下HTML中的表单。

 

 

一、表单标签<form>

<form> 标签用于创建供用户输入的 HTML 表单。

<form>标签定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交 。

表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。

form 元素是块级元素,其前后会产生折行。

格式:

<form>...</form>

 

二、表单标签的属性

介绍一些<form>标签中常见的属性

 

1. action属性

action用于指定表单数据提交到哪个地址进行处理。

表单的处理程序是表单要提交的地址,这个程序地址用来处理从表单搜集的信息。

提交地址可以是相对地址,也可以是绝对地址,还可以是一些其他形式的地址,比如邮箱等。

语法:

<form  action="表单的处理地址"></form>

 

举例:

<form  action="mailto:qianduan@foxmail.com"></form>

<form  action="../php/form.php"></form>

 

说明:"mailto:qianduan@foxmail.com"是程序提交地址,表示使用邮件形式。

 

2. mothed属性

method 方法规定如何发送表单数据(form-data)(表单数据会被发送到在 action 属性中规定的页面中)。

表单数据可被作为 URL 变量的形式来发送(method="get")或者作为 HTTP post 事务的形式来发送(method="post")。

两种方法区别:

get在安全性上较差,所有的表单域的值都会在地址栏中直接显示出来。

post除了只有可见的处理脚本程序之外,其他的信息都可以隐藏。

所以实际的开发当中通常都选择post这种处理方式。

语法:

<form  method="传送方法"></form>

 

3. target属性

target 属性规定一个名称或一个关键词,指示在何处打开 action URL,即在何处显示提交表单后接收到的响应。

<form>标签中的target属性和<a>标签的target属性类似。

target属性的属性值:

属性值

说明

_self

默认值,表示在当前的窗口打开页面

_blank

表示在新的窗口打开页面

_parent

表示在父级窗口中打开页面

_top

在整个窗口中打开。表示页面载入到包含该链接的窗口,取代当前在窗口中的所有页面

name

在指定的 中打开。

 

语法:

<form target="属性值"><form>


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜