表单基础

在日常使用网页浏览信息的过程中免不了要搜索一些信息,或写篇文章需要发布。
那我们是用什么方式把用户的信息传递给服务器呢?

我们下馆子吃饭点菜的时候服务员都会把你点的菜记录在一张单子上,然后送到后厨。大厨根据点单就可以做出美味的菜肴了。
同样,在HTML中也是一样存在类似的单子,叫表单。它在网页中的主要功能就是收集用户信息,然后递交给服务器。

表单主要由三个部分组成分别是,表单标签,表单域,表单按钮。

举个例子


表单基础_第1张图片
表单例子

上图中就是一个最基本的表单例子,里面包含表单的三要素,表单标签、表单域 、表单按钮。

红框中的代码就是一段表单代码由

标签包裹着。
标签里所包含的所有代码都会提交到服务器上面。
我们来了解一下里面的各个标签是代表什么,分别有什么作用


action属性:的属性规定了提交表单时向什么地方提交表单数据,指向服务器地址。
method属性:规定了这份表单数据是以什么方式提交。
表单的提交方式有两种分别是get和post.
get的提交方式比较简单粗暴,所提交的内容会在URL中显示出来,适用于少量且不具有保密性的数据提交。例如用搜索引擎搜索关键字。
host提交数据的方式相对封闭。不会在URL中显示出表单内容,并且可是传输大量的数据。适用于保密性的数据提交,或者是大量的数据提交。例如用户的账户密码提交。


标签:用于收集用户信息的标签。
type属性: 规定收集信息的类型。
name属性: 规定input元素的名称,用于对提交到服务器后的表单数据进行标识。
placeholder属性: 在可以输入信息的地方预先写入简短的信息提示。显示效果如图中输入框里的小字提示。
.


textarea标签:文本域,有滚动条的多行文本输入控件。
cols、rows属性:定义textarea文本域的大小。不过一般最好是使用CSS的height和nidth来定义。


value属性:为input元素设定值,对于不同的输入类型,value属性的用法也不同。上行代码中value属性定义的是按钮上的显示文本。

以上就是一段最简单最基础的表单代码,它包含了表单最基础的三要素。实现了最基础的表单样式,了解了最基础的表单标签属性,表单还有很多标签属性值没有细挖。待日后随着更深入的了解再写一篇深入的关于表单的方方面面。

2017/5/4  17:36

你可能感兴趣的:(表单基础)