html表单

表单是HTML中获取用户输入的的手段。一个基本的表单实例如下:

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

action属性值为提交的地址。method属性指定了用来将表单数据发送到服务器的HTTP方法,允许的值为get和post,默认值为get。get请求用于安全交互,同一个请求可以发起任意多次而不会产生额外作用。post请求则用于不安全交互,提交数据的行为会导致一些状态的改变。具体区别可以参考get与post区别
表单主要是input元素,常用input标签如下:
常用input标签
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
其它常用输入元素还有select和textarea

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<textarea rows="3" cols="20">
test
</textarea>

select 元素可创建单选或多选菜单
textarea 元素定义多行的文本输入控件
常用label元素将字段与标签关联

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
fieldset与legend

<fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
</fieldset>

fieldset 元素可将表单内的相关元素分组,legend 元素为fieldset 元素定义标题。

本部分内容参考HTML5权威指南,w3school,需要更详细的内容可以参考MDN文档

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

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 457评论 0 1
  • HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。 表单...
    饥人谷_Dylan阅读 655评论 0 48
  • 1 表单是如何工作的? 用户在网页上填写表单并提交所填信息,浏览器将用户提交的数据发送至 Web 服务器, Web...
    饥人谷_Mily阅读 1,213评论 0 1
  • 一个朋友说起:“我的爷爷总算良心发现了,他想在养老院附近租个房子住,然后陪我奶奶。……我奶奶这辈子也算了值了,我爷...
    西瓜甜甜啦阅读 1,172评论 35 36
  • First created on Mar.06.2013. All rights reserved. 家里已过了惊...
    astrocachet阅读 171评论 0 0