从零开始学web开发之html5-8表单

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pigdreams/article/details/79954557

1.表单简介

表单,接触动态页面的第一步,作用是在客户端收集用户的信息,然后将数据递交给服务器来处理。


2.表单form标签

语法:

<form>表单各种标签</form>  

这里的表单指的是文本框、按钮、下拉列表等的统称。表单form也是一种块元素,不能与其它元素共存于一行。

<1>.标签属性

五个重要的属性

name

表单名称属性,当表单不止一个时,使用name属性来给表单进行命名,这样也可避免表单提交后在后台程序中出现混乱。
语法:

<form name="表单名称"></form>

表单名称中不能包含特殊字符和空格

action

提交表单属性,用于指定表单数据提交到哪个地址进行处理。
语法

<form action="表单的处理程序">...</form>

处理程序是表单要提交的地址,这个程序地址用来处理从表单搜集的信息。
这个地址可以是相对地址,也可以是绝对地址,还可以是一些其它形式的地址。

ex:
<form name="pigsForm" action="mailto:abc@126.com"></form>

上述action表示使用邮件形式进行提交。

method

传送方法属性,作用是告诉浏览器指定将表单中的数据使用哪一种HTTP提交方法,取值为get或post.

属性值 说明 特征
get 默认值,表单数据被传送到action属性指定的URL,然后这个新URL被送到处理程序上 安全性较差,所有的表单域的值都直接显示出来了
post 表单数据被包含在表单主体中,然后被传送到处理程序上 除了可见的脚本处理程序之外,其他的信息都可以隐藏,通常选择这种方式。

语法:

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

target

目标显示方式属性,用来指定目标窗口的打开方式。参考a标签中的target属性。

属性值 语义
_self 默认方式,在当前窗口打开页面
_blank 在一个全新的空白窗口中打开页面
_top 表示页面载入到包含该链接的窗口,取代当前在窗口中的所有页面
_parent 表示在父级窗口中打开页面

enctype

编码方式属性,用以设置表单信息提交的编码方式。

属性值 说明
application/x-www-form-urlencoded 默认的编码方式
multipart/form-data MIME编码,对于“上传文件”这种表单必须选择该值

<2>.表单对象

指放在<form></form>标签内的各种标签。
共有四种:

  • input,
  • textarea,
  • select,
  • option

注:这四种标签也可以放在form标签外面,如需要提交表单数据则必须放在form标签内部。


3.input标签简介

语法:

<input type="表单类型"/>

自闭合标签,也可放在form之外的地方。

type属性值 说明
text 单行文本框
password 密码文本框
button 按钮
reset 重置按钮
image 图像形式的提交按钮
radio 单选按钮
checkbox 复选框
hidden 隐藏字段
file 文件上传

4.单行文本框text

<1>.简介

语法:
<input type="text"/>

<2>.text属性

属性 说明
value 定义文本框的默认值,也就是文本框内的文字
size 定义文本框的长度,以字符为单位
maxlength 设置文本框中最多可以输入的字符数

对于元素属性的设置,是没有先后顺序,input还有一个name属性,一般情况下使用id属性,而很少使用name属性。


5.密码文本框password

<1>.简介

属性与单行文本框一致,只是密码输入框的字符是不可见的。

<2>.属性

与单行文本框text一致


6.单选按钮radio

<1>.简介

单选按钮radio只能从选项列表中选择一项,选项1与选项2是互斥。

语法:

<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>

说明:
name和value是单选按钮必要的两个属性,必须要设置。

<2>.易忽略点

  • 注意如果是同一组的按钮必须指定同一个name属性,否则就会出现两个按钮都可选的情况。
  • value属性是为了便于向服务器传递数据,所以需要该属性。

7.复选框checkbox

复选框可从选项列表中选择一项或者多项。
语法:

<input type="checkbox" value="复选框取值" checked="checked"/>

checked属性表示该选项在默认情况下已经被选中。value的作用与单选按钮一致。
HTML中的复选框是没有文本的,需要加入label标签,并且用label标签的for属性指向复选框的id.


8.表单按钮

<1>.普通按钮button

在HTML中,该按钮一般情况下要配合JavaScript脚本来进行表单的实现。
语法:

<input type="button" value"普通按钮的取值" onclick="JavaScript脚本程序"/>

value的取值就是显示在按钮上的文字,onclick是普通按钮的事件js执行。

<2>.提交按钮summit

一种具有特殊功能的普通按钮,单击按钮 可以实现将表单内容提交给服务器处理
语法

<input type="summit" value"提交按钮的取值"/>

<3>.重置按钮reset

单击重置按钮可以清除用户在页面表单中输入的信息。
语法:

<input type="reset" value"重置按钮的取值"/>

这里需要注意的是reset只能清除当前所在form标签内部表单元素的输入内容,
对当前所在form标签之外的表单元素无效。


9.图片域

语法:

<input type="image" src="图像的路径"/>

虽然可以用图片域实现好看的按钮,但不推荐这种做法。
前端开发,有一个不成文的规定,能用CSS实现的就不要用图片来实现。因为图片会影响页面的加载速度,相反CSS只用少量代码即可实现相同效果。


10.隐藏域hidden

向服务器传输一些不想让用户看见的数据,隐藏域中包含那些要提交的数据,但这些数据并不显示在浏览器中。
语法:

<input type="hidden"/>

注意隐藏域可以在HTML源代码中看到。


11.文件域file

用以实现文件上传功能。
语法:

<input type="file"/>

注意该表单的form中必须使enctype属性值为”multipart/form-data”


12.多行文本框textarea

可以输入多行信息
语法:

<textare rows="行数" cols="行数">多行文本框内容</textarea>.

说明:
不能像单行文本框那样使用value属性来设置多行文本框的默认值,如须添加可直接在标签内部添加。


13.下拉列表select

下拉列表由select和option这两个标签配合使用,该特点与列表类似。
语法:

<select>
    <option>选项显示的内容</option>
    ....
    <option>选项显示的内容</option>
<select>

<1>.select标签属性

属性 说明
multiple 可选属性,只有一个属性值”multiple”,默认情况下列表只能选一项,设置该值后可按ctrl+鼠标左键选取。
size 下拉列表展开之后可见列表项的数目

<2>.option标签属性

属性 说明
value 选项值
selected 是否选中

value主要是用来给javascript调用的,或者向服务器传递数据。

14.示例链接,右键可查看源码

示例网页链接

阅读更多

没有更多推荐了,返回首页