HTML form

HTML Forms and Input

HTML forms are used to collect different types of user input.

Online example

Create text field (Text field)
This example demonstrates how to create a text field in an HTML page. The user can write text in the text field.

Instance

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

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

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Creating a password field
This example demonstrates how to create an HTML password field.

Instance

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

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

(More examples can be found at the bottom of this page.)

HTML Form

A form is an area that contains form elements.

Form elements allow users to enter content in the form, such as text areas, drop-down lists, radio-buttons, checkboxes, etc.

The form is set using the form tag <form>:

<form>
.
input 元素
.
</form>

##HTML Form - Input Element

The most commonly used form tag is the input tag (<input>).

The input type is defined by the type attribute (type). Most of the commonly used input types are as follows:

Text Fields

Text fields are set through the <input type="text"> tag, Text fields are used when users type letters, numbers, etc. into a form.

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

browser displays as follows:

Note: The form itself is not visible. Also, in most browsers, the default width of a text field is 20 characters.

Password field

The password field is defined by the tag <input type="password">:

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

browser display effect is as follows:

Note:Password field characters will not be displayed in plain text, but will be replaced by asterisks or dots.

Radio Buttons

<input type="radio"> tag defines the form radio button options

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

The browser display effect is as follows:

Checkboxes

<input type="checkbox"> defines the checkbox. The user needs to select from several Select one or several options from a given selection.

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

browser display effect is as follows:

Submit Button

<input type="submit"> defines the submit button.

When the user clicks the confirmation button, the content of the form will be transferred to another file. The form's action attribute defines the file name of the destination file. The file defined by the action attribute usually performs related processing on the input data received. :

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

browser display effect is as follows:

If you type a few letters in the text box above and then click the confirmation button, the input data will be sent to The page of "html_form_action.php". This page will display the entered results.

More examples

Radio buttons
This example demonstrates how to create radio buttons in HTML.

Instance

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

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

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Checkboxes
This example demonstrates how to create a checkbox in an HTML page. Users can check or uncheck checkboxes.

Instance

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

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Simple drop-down list
This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is a selectable list.

Instance

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

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Preselected drop-down list
This example demonstrates how to create a simple drop-down list with preselected values.

Instance

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

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Textarea
This example demonstrates how to create a text area (multi-line text input control). The user can write text in the text field. There is no limit to the number of characters that can be written.

Instance

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

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Create button
This example demonstrates how to create a button. You can customize the text on the button.

Instance

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

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Form example

Bordered form
This example demonstrates how to draw a box with a title around the data.

Instance

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

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Form with input box and confirmation button
This example demonstrates how to add a form to the page. This form contains two input boxes and a confirm button.

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Form with checkboxes
This form contains two checkboxes and a confirm button.

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Form with radio buttons
This form contains two radio buttons and a confirmation button.

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Sending an email from a form
This example demonstrates how to send an email from a form.

Instance

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

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

HTML form tag

New : HTML5 new tag

Define the form for user input##< input>##<textarea><label><fieldset><legend>#<select>Define the option groupDefine the options in the drop-down listDefine a click button##<datalist><keygen><output>Define a calculation result

tag	Description
##<form>
Define the input area
Define the text area (a multi-line Input control)
defines the label of the <input> element, usually the input title
Defines a set of related form elements and uses an outer frame to enclose them
Defines the title of the <fieldset> element
Define the drop-down option list	##<optgroup>
	<option>
	<button>

Specify a predefined input control option list
Defines the key pair generator field of the form
	← HTML layout HTML frame → submit Home Videos Q&A My php.cn Home Course Article Q&A Dictionary Manual Download search APPDownload