HTML宝典(第 1 版)
3.1 什么是表单
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

HTML 表单的主要作用是接收用户的输入,当用户提交表单时,浏览器将用户在表单中输入的数据打包,并发送给服务器,从而实现用户与Web服务器的交互。

表单是控件的容器,一个表单由form元素、表单控件和表单按钮三部分组成:

1) form元素:用来创建表单,并通过 action、method和enctype三个属性,来设置表单的提交路径、提交方式、编码类型。

2) 表单控件:主要用来收集用户数据,包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,也包括对表单控件进行分组显示的 fieldset 和 legend 控件。根据功能的不同,input 控件又分为 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。

3) 表单按钮:包括提交按钮、重置按钮和一般按钮。提交按钮和一般按钮可用于把表单数据发送到服务器,重置按钮用于重置表单,把整个表单恢复到初始状态。

任何HTML表单,都由 form 元素创建,即以 <form> 标签开始,</form> 标签结束,在 <form> 和 </form> 之间,是表单所需要的控件和按钮。

每一个表单控件都有一个 name 属性,用于在提交表单时,对表单数据进行识别。访问者通过提交按钮提交表单,表单提交后,他们填写的数据就会发送到服务器端进行处理。如,用户登录的表单:

<form action="login.asp" method="post">
    <label>用户名: </label><input type="text" name="username" />
    <label>密码: </label><input type="password" name="password" />
    <input type="submit" value=" 登 录 " />
</form>

上述代码中,由 form 元素创建了一个表单,表单中包括两个控件和两个按钮,分别是用户名和密码的输入型控件,及登录和取消按钮。登录按钮为提交按钮,取消按钮为重置按钮。运行结果如图 3‑1 所示:

用户登录表单
图3-1 用户登录表单

当用户点击登录按钮后,则以 post 方式,将用户名和密码发送到服务器端login.asp 文件进行处理;如果用户点击取消按钮,则会清除用户填写的数据,将整个表单恢复到页面初始加载时的状态。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验