HTML form

What is a form

##The form is to collect different types of user input, such as:

Website registration
Login
Post resume
Forum post
Reply S vote etc

##HTML Form

A form is an area containing form elements. A web page may have multiple forms, but a form corresponds to a form area, and can only submit the form items of the current form area.

The form element allows the user to enter content in the form, such as: text area (textarea) , drop-down lists, radio-buttons, checkboxes, etc.

The form uses the form tag <form> to set:

##<form method="Transmission method" action="Server file address">

.input element
</form>

action is used to configure where the form data is sent for processing. It is usually the address of a dynamic script, such as the address of a PHP file. login.php

method can be GET or POST (if not set, the system defaults to GET, but in most cases We use POST and GET to submit in the form of parameters. Users can directly see the submitted parameters. Post uses the HTTP post mechanism to place each field in the form and its content in the HTML HEADER and transmit it to the URL address pointed to by the ACTION attribute. Can't see this process)

##HTML Form - Input Element

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

The input type is defined by the type attribute (type). The most frequently used input types are as follows:

Text field

The text field is set through the <input type="text"> tag. When the user types letters, numbers, etc. in the form, the text field is used.

Example

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

The browser displays the following:

Password field

##The password field is defined by the tag <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>

The browser displays as follows:

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

Radio button

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

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

The browser displays the following:

Checkbox

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

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

The browser displays as follows:

##Submit button

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

When the user clicks the confirm 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. :

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

The browser displays as follows:

#If you type a few letters in the text box above and then click the confirm button, the input data will Sent to the "action.php" page as a post. This page will display the entered results.

HTML form tag

Tags	Description
<form>	Define the form for user input
<input>	Define the input field
<textarea>	Define the text area (a multi-line input control)
<label>	Defines the label of the <input> element, usually the input title

## <option> Define the options in the drop-down list

<fieldset>	Defines a set of related form elements and uses an outer frame to enclose them
< ;legend>	Defines the title of the <fieldset> element
<select>	Defines the drop-down option list
<optgroup>	Define the option group

## <button> < datalist> <keygen> <output>

To learn more about HTML form tags, visit our HTML Reference Manual

For more examples

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. Dropdown list with preselected values.

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

Program running result:

This example demonstrates how to create a text field (multiple line text input control). The user can write text in the text field. An unlimited number of characters can be written , as well as a button. You can customize the text on the button.

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

Program running result:

##Form instance

This example demonstrates how to add a form to the page. This form contains an input box, a text field, radio buttons, check boxes, drop-down lists and a confirm button.

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

Program running results:

#Click the "Submit" button, and the form data will be sent to the form.php page in the form of a post

Example

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

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

Program running results:

#Click the "Submit" button, the form data will be sent to the form.php page in the form of a post, click "Reset" ” button will clear the content you entered.

Continuing Learning

new file

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

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

Define a click button
Specifies a predefined input control option list
Defines the key pair generator field of the form
Define a calculation result

HTML form

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]