HTML 表单

什么是表单

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

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

HTML 表单

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

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

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

<form method="传送方式" action="服务器文件地址">
.input 元素
</form>

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

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

HTML 表单 - 输入元素

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

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form>
    文本域: <input type="text" name="firstname"><br>
    文本域: <input type="text" name="lastname">
</form>
</body>
</html>

浏览器显示如下：

密码字段

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form>
    姓名: <input type="text" name="firstname"><br>
    密码: <input type="password" name="lastname">
</form>
</body>
</html>

浏览器显示如下：

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

单选按钮

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>
</body>
</html>

浏览器显示如下：

复选框

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<input type="checkbox" name="vehicle" value="自行车">自行车
<input type="checkbox" name="vehicle" value="汽车">汽车
<input type="checkbox" name="vehicle" value="飞机">飞机
<input type="checkbox" name="vehicle" value="轮船">轮船
</body>
</html>

浏览器显示如下：

提交按钮

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form name="input" action="action.php" method="post">
    用户名 <input type="text" name="user"><br/>
    密　码 <input type="password" name="user">
     <input type="submit" value="Submit">
</form>
</body>
</html>

浏览器显示如下：

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

HTML 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题

<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项

<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

学习更多HTML 表单标签，请访问我们的HTML 参考手册

更多实例

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
    <select name="学历">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="大专"  selected>大专</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
    </select>
</form>
</body>
</html>

程序运行结果：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
<textarea rows="8" cols="20">
我是一个文本框。
</textarea>
    <input type="button" value="提交">
</form>
</body>
</html>

程序运行结果：

表单实例

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form action="form.php" method="post">
    作者: <input type="text" name="Name" ><br>
    文本内容:<br/>
    <textarea rows="8" cols="20">
    </textarea><br/>
    <input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br/>
    <select name="学历">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="大专"  selected>大专</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
    </select>
    <input type="submit" value="提交">
</form>
</body>
</html>

程序运行结果：

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

实例

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<form action="form.php" method="post">
    姓名:<br>
    <input type="text" name="name" ><br>
    E-mail:<br>
    <input type="text" name="mail" ><br>
    你的意见:<br>
   <textarea cols="20" rows="2">
   </textarea><br/>
    <input type="submit" value="发送">
    <input type="reset" value="重置">
</form>
</body>
</html>

程序运行结果：

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

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="form.php" method="post"> 姓名:<br> <input type="text" name="name" ><br> E-mail:<br> <input type="text" name="mail" ><br> 你的意见:<br> <textarea cols="20" rows="2"> </textarea><br/> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

HTML 表单

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]