HTML表单用法

HTML form表单用于为用户输入创建 HTML 表单。收集用户不同类型的数据。

HTML Form 語法

<form action="目的地址" method="传送方式"> 表单内容 </form>
HTML 表单是由 <form> 标签开始,用 </form> 标签结束,两个标签之间就是放置表单元素的地方,form 将用户填完的资料,发送至 action 所设定的目的地址,例如传到一个 PHP 页面,method 是内容传送的方式,有 get 与post 两种方式。

  • get是用来从服务器上获得数据,在 URL 中对所有人都是可见的,不能传输大量的数据,受限于URL长度。
  • 而post是用来向服务器上传递数据,数据不会显示在 URL 中。对内容长度没有限制。

HTML Form 表单内容范例

<form action="get.php" method="post"> <label for="name">用户名:</label><input type='text'><br> <label for="password">密码:</label><input type='password'><br> <input type='submit' value='提交'> </form>

范例在 <form></form> 标签之中使用了四个表单元素,分別为文字输入框<input type='text'>,密码输入框<input type='password'>,发送表单的按钮<input type='submit' value='提交'>,这样的表单设计完成后,当用户填写完数据并提交,系统就会以 get 的方式将资料传送到 get.php 这个后台页面,这裡需要注意的是 method='post' 的 post 必须是小写,同样的 get 也要小写,至于 get.php 的数据处理功能则需要另外写。

常见表单元素

  • 单行文字输入框 input type= text <input type="text" name="" value="">
  • 密码输入框 input type= password <input type="password" name="" value="">
  • 标注标签 label <label for=" "> </label>
  • 下拉选择框 select option <select name=""><option value=""></option></select>
  • 单选按钮 radio buttons <input type="radio" name="" value="">
  • 多选框 checkbox <input type="checkbox" name="" value="">
  • 多行文字输入框 textarea <textarea name=""></textarea>
  • 隐藏元素 input hidden <input type="hidden" name="" value="">
  • 按钮 button <input type="button" name="">
  • 提交表单按钮 submit <input type="submit" name="" value="提交">
  • 重置按钮 reset <input type="reset" name="" value="重置">

常用元素属性:

type:输入的类型
name:表单的名称
value:表单的内容

这些表单的元素可以自由搭配成为一个完整的表单,每个元素都有他独特的属性以及语法规则。

推荐阅读更多精彩内容

  • html表单用途 html用于收集用户的输入向服务端提交数据,从而实现用户与web端的交互 html表单的属性 1...
    zhangkun_sunset阅读 154评论 0 0
  • 1. 简介 HTML 表单表示文档中的一个区域,包含了表单元素等交互控制原件,用于向 web 服务器提交信息。 f...
    饥人谷_风争阅读 189评论 0 0
  • HTML 表单用于搜集不同类型的用户输入。 1.<form> 元素:<form> 元素定义 HTML 表单 1.<...
    饥人谷_兔子君阅读 198评论 0 0
  • 从浏览器的角度来看表单是如何工作的 浏览器加载表单页面。这个过程会创建所需的控件,如按钮、文本输入框等。 用户输入...
    小兀山丘阅读 134评论 0 1
  • 今年的雪比去年来得稍晚一些。 清晨,天还未亮,就要去上早自习。还在被子里,便已觉今天不同往日,不可名状,只觉更冷了...
    言少卿阅读 82评论 0 3
  • L/2016-8-26 有个男人爱着你,用心爱着你。 那个男人爱着你,彻底爱着你。 他情愿变成影子守护着你跟随着你...
    MY林小妖阅读 595评论 2 2
  • http://www.cnblogs.com/ayqy/p/4471638.html 1.原型链2.call继承 ...
    SmallTwo阅读 292评论 0 1
  • 秋天来了!告别软绵绵的T恤,好的衬衣让整个人气场平添十倍!不过,很多人在穿衬衫的时候,瞬间化为凡人。好像是在穿一件...
    森美形象SammyZhao阅读 201评论 0 0
  • 前序 因为时间管理这个新兴的名词而聚在一起的小伙伴,打算造...
    舒云庄园阅读 237评论 5 1