<form>

收藏803

阅读186023

更新时间2022-04-11

前言:

HTML <form> 标签 实例 带有两个输入字段和一个提交按钮的 HTML 表单: <form action='demo_form.php' method='get'> First name: <input type='text' name..>.........

HTML <form> 标签

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


浏览器支持

1000.png

所有主流浏览器都支持 <form> 标签。


标签定义及使用说明

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个如下的表单元素:

  • <input>

  • <textarea>

  • <button>

  • <select>

  • <option>

  • <optgroup>

  • <fieldset>

  • <label>


HTML 4.01 与 HTML5之间的差异

HTML5 新增了两个新的属性:autocomplete 和 novalidate,同时不再支持 HTML 4.01 中的某些属性。


HTML 与 XHTML 之间的差异

在 XHTML 中,name 属性已被废弃。使用全局 id 属性代替。


属性

New :HTML5 中的新属性。

属性描述
acceptMIME_typeHTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
accept-charsetcharacter_set规定服务器可处理的表单数据字符集。
actionURL规定当提交表单时向何处发送表单数据。
autocompleteNewon
off
规定是否启用表单的自动完成功能。
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)
methodget
     post
规定用于发送表单数据的 HTTP 方法。
nametext规定表单的名称。
novalidateNewnovalidate如果使用该属性,则提交表单时不进行验证。
target_blank
     _self
     _parent
     _top
规定在何处打开 action URL。


全局属性

<form> 标签支持 HTML 的全局属性。


事件属性

<form> 标签支持 HTML 的事件属性。


Examples

尝试一下 - 实例

带有复选框的表单
此表单包含两个复选框和一个提交按钮。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

带有单选按钮的表单
此表单包含两个单选框和一个提交按钮。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


相关文章

HTML 教程:HTML 表单和输入

HTML DOM 参考手册: Form 对象


相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号