表单基础

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

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

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

举个例子


表单例子

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

红框中的代码就是一段表单代码由<form></form>标签包裹着。<form>标签里所包含的所有代码都会提交到服务器上面。
我们来了解一下<form>里面的各个标签是代表什么,分别有什么作用

<form action="get info" method="get">

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

<input id="username" type="password" name=“username” placeholder="输入账号">

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

<textarea id="comment" name="comment" cols="50" rows="10" placeholder="文本域"></textarea>

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

<input type="submit" value="提交">

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

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

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单的作用是收集用户的输入信息,用户...
    饥人谷_whiskey阅读 457评论 0 0
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单的作用是搜集用户的输入,用户提交表单时...
    DCbryant阅读 319评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,215评论 6 13
  • 狗狗过敏可大可小,引起狗狗过敏的原因也是多种多样。 那么狗狗过敏都有哪些常见症状呢? 季节性过敏——多见于换季期间...
    宠蜜Ben阅读 770评论 0 0