当前位置 : IT培训网 > Web前端 > Web教程 > 如何制作html表单

如何制作html表单

时间:2016-12-02 18:14:00  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
关于html制作表单方面的知识点就介绍到这里了,如果你还不会的话,赶紧来报名吧,专家名师手把手叫你学会html表单的制作。

如何在网页中做表单呢,对于一个网页设计者来说,不是难事,所以今天我们针对的主要是初学者,下面就让我们一起来学习下如何制作表单吧!

HTML 表单和输入

HTML 表单用于搜集不同类型的用户输入。

HTML 表单标签

New : HTML5新标签

标签

描述

<form>

定义供用户输入的表单

<input>

定义输入域

<textarea>

定义文本域 (一个多行的输入控件)

<label>

定义了 <input> 元素的标签,一般为输入标题

<fieldset>

定义了一组相关的表单元素,并使用外框包含起来

<legend>

定义了 <fieldset> 元素的标题

<select>

定义了下拉选项列表

<optgroup>

定义选项组

<option>

定义下拉列表中的选项

<button>

定义一个点击按钮

<datalist>New

指定一个预先定义的输入控件选项列表

<keygen>New

定义了表单的密钥对生成器字段

<output>New

定义一个计算结果

HTML 表单

表单是一个包含表单元素的区域。

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

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

<form>

.

input 元素

.

</form>

HTML 表单 - 输入元素

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

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

文本域(Text Fields

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

浏览器显示如下:

如何制作html表单_www.cnitedu.cn

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

浏览器显示效果如下:

如何制作html表单_www.cnitedu.cn

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

单选按钮(Radio Buttons

<input type="radio"> 标签定义了表单单选框选项

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

浏览器显示效果如下:

如何制作html表单_www.cnitedu.cn

复选框(Checkboxes

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

浏览器显示效果如下:

如何制作html表单_www.cnitedu.cn

提交按钮(Submit Button)

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

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

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

浏览器显示效果如下:

如何制作html表单_www.cnitedu.cn

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

关于html制作表单方面的知识点就介绍到这里了,如果你还不会的话,赶紧来报名吧,专家名师手把手叫你学会html表单的制作。

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放