这里写目录标题

Form表单介绍
表单元素
- 单选按钮
- 复选框
- 文件
- 隐藏域
- 提交按钮
- 重置按钮
- 按钮
- 图像图片按钮
- 下拉列表
- 多行文本框(文本域)
HTML5新增type类型
HTML5新增属性

Form表单介绍

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

举例

<html><head><meta charset="UTF-8"><title></title></head><body><!--form表单标签 帮助我们向服务器提交输入的信息的标签没有任何的展示效果帮助我们确定数据提交的范围  --><form action="https://www.baidu.com/s" method="get">请输入关键字:<input type="text" name="wd"/><input type="submit" value="百度一下" /></form></body>
</html>

表单元素

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

<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>

密码框：

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

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

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

单选按钮

<input type="radio"> 标签定义了表单单选框选项,name属性定义相同的值可以实现单选框互斥效果

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

复选框

<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>

文件

定义文件选择字段和 “浏览…” 按钮，供文件上传：

选择一个文件: <input type="file" name="img">

隐藏域

定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：

<input type="hidden" name="country" value="Norway">

提交按钮

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

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

重置按钮

定义重置按钮（重置所有表单值为默认值）：

<input type="reset">

按钮

没有任何功能的按钮

<input type="button" value="点我"/>

图像图片按钮

定义图像作为提交按钮：

<input type="image" src="img_submit.gif" />

下拉列表

<select> 元素用来创建下拉列表。
<option> 标签定义下拉列表中的一个选项（一个条目）。

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select>

<optgroup> 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

<select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup>
</select>

多行文本框(文本域)

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="10" cols="30"><!--30个字符，10行的一个文本框-->
我是一个文本框。
</textarea>

HTML5新增type类型

email
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

E-mail: <input type="email" name="usremail">

如果你邮箱填写的不对，那么在提交的时候就会报错误提示
2.3.2 url
定义用于输入 URL 的字段：

添加你的主页: <input type="url" name="homepage">

如果格式错误，那么提交的时候就会报错
2.3.3 color
从拾色器中选取颜色：

选择你喜欢的颜色: <input type="color" name="favcolor">

2.3.4 number
定义用于输入数字的字段（您可以设置可接受数字的限制）：

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

请使用下面的属性来规定限制：
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
2.3.5 range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

<input type="range" name="points" min="1" max="10">

请使用下面的属性来规定限制：
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
2.3.6 date
定义选择日、月、年控件：

生日: <input type="date" name="bday">

2.3.7 month
选择月、年（不带时区）：

生日 ( 月和年 ): <input type="month" name="bdaymonth">

2.3.8 week
定义选择周、年控件（不带时区）：

选择周: <input type="week" name="week_year">

HTML5新增属性

autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有标签的类型。

User name: <input type="text" name="user_name"  autofocus />

2.4.2 multiple 属性
multiple 属性规定输入域中可选择多个值。
1.你的国籍：

<select name="nationality" multiple><option value="1">中国</option><option value="2">美国</option><option value="3" selected>法国</option><option value="4">德国</option><select>

2.4.3 placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="search" name="user_search"  placeholder="Search W3School" />

2.4.4 required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required />

html的form表单详解相关推荐

HTML第三章 form表单(详解，内含详细代码示例)
目录 1.特点 2. 表单的语法和属性 3. input元素 4. select和下拉选择框 5. textarea多行文本域 6.label关联控件每日一句 1.特点提供了一些可视化的输入控件 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
form提交后台注解拿不到数据_Form表单详解
主要内容Form表单.表单元素.表单元素的属性.HTML5新增type类型和HTML新增属性知乎视频www.zhihu.com 知乎视频www.zhihu.com 知乎视频www.zhihu. ...
菜鸟教程：HTML表单详解
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.表单元素form 二.form元素的属性 1.action 2.method 3.enctype 4.注意事项三 ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
form表单提交三种方式，demo实例详解
第一种:使用type=submit 可以直接提交 <html><head><title>submit直接提交</title></head>& ...
微信小程序form表单提交到MYSQL实例详解(PHP)
1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSO ...
django之Form表单
HTML表单在HTML中,表单是<form>...</form> 之间元素的集合,它们允许访问者输入文本.选择选项.操作对象和控制等等,然后将信息发送回服务器. 某些表单的元 ...
html表单怎么设置编码,form 表单设置编码和页面编码
var isIE=!!window.ActiveXObject; if(isIE && document.charset!="utf-8")location.rel ...

html的form表单详解