您现在的位置是: 文字教程> 前端教程> HTML教程>

HTML教程第16课,HTML表单-

2019-03-20 10:55:231
HTML表单,什么是表单?表单就是为了搜集不同类型的用户输入,譬如:网站注册 、登录 、发布简历、论坛发帖、回帖、S投票等。表单是一个包含表单元素的区域。一个网页可能有多个form

HTML表单

什么是表单

表单就是为了搜集不同类型的用户输入,譬如:

网站注册 、登录 、发布简历、论坛发帖、回帖、S投票等


HTML表单

表单是一个包含表单元素的区域。一个网页可能有多个form,但是一个form对应一个表单区域,也只能提交当前表单区域的表单项

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 form来设置:

表单使用表单标签 form来设置


.input 元素

action 用来配置表单数据传送到哪里处理,通常都是一个动态脚本的地址,譬如一个PHP文件的地址 login.php  

method 可以是GET也可以是POST(如果不设置,系统默认是GET,但大多数情况下我们使用POST,GET以参数形式提交,用户能直接看到提交的参数,post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程)


HTML表单 - 输入元素

多数情况下被用到的表单标签是输入标签(input)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域

文本域通过

文本域通过

标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。


实例

实例

浏览器显示如下:

浏览器显示如下


密码字段

密码字段

密码字段通过标签 来定义:

密码字段通过标签

自己输入自己个数字试试

运行结果

运行结果

注意:密码字段字符不会明文显示,而是以星号或圆点替代。


单选按钮

 单选按钮

 标签定义了表单单选框选项

标签定义了表单单选框选项

运行结果:

运行结果

复选框

复选框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

实列:

定义了复选框

浏览器显示如下:

浏览器显示如下

提交按钮

input type="submit" 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

定义了提交按钮

浏览器显示如下

浏览器显示如下


假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会以post形式传送到 "action.php" 的页面。该页面将显示出输入的结果。


HTML 表单标签

 标签描述
form定义供用户输入的表单
input定义输入域
textarea定义文本域 (一个多行的输入控件)
abel定义了 input 元素的标签,一般为输入标题
fieldset定义了一组相关的表单元素,并使用外框包含起来
legend定义了 fieldset 元素的标题
select定义了下拉选项列表
optgroup定义选项组
option定义下拉列表中的选项
button定义一个点击按钮
datalist指定一个预先定义的输入控件选项列表
keygen定义了表单的密钥对生成器字段
output定义一个计算结果

学习更多HTML 表单标签,请访问HTML参考手册


更多实例

本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。带有预选值的下拉列表。

表框是一个可选列表

程序运行结果:

程序运行结果


本例演示如何创建文本域(多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制,以及一个按钮。你可以对按钮上的文字进行自定义。

多行文本输入控件

运行结果:

运行结果


表单实例

本例演示如何向页面添加表单。此表单包含一个输入框,一个文本域,单选框,复选框,下拉列表和一个确认按钮。

下拉列表和一个确认按钮

运行结果

运行结果

点击"提交"按钮,表单数据将以post形式发生发送到form.php页面

实例

此例演示如何从表单发送电子邮件。

此例演示如何从表单发送电子邮件

程序运行结果:

程序运行结果

点击"提交"按钮,表单数据将以post形式发生发送到form.php页面,点击“重置”按钮,会清空你输入的内容。


本网站免费提供学习前端、HTML教程免费SEO学习,喜欢就记得关注我们

文章评论