Basic properties of form tags
input type = "text" The text input box value sets the default display content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/>
</form>
</body>
input type = "password" is the value of the password box to set the default display content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/>
</form>
</body>
input type = "redio" is the name attribute of the radio box, which can be grouped checked="checked" means it is selected by default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
</form>
</body>
Input type = "checkbox" check box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++
</form>
</body>
Input type="reset" is to reset the button value attribute to modify the text on the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/>
</form>
</body>
This is the page before clicking the reset button.
This is the page after clicking the reset button. The default initial values of the page settings are programmed.
Input type="submit" is the text on the submit button value attribute to modify the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
</form>
</body>
After clicking the submit button, there will be a string of content in the url address bar, which means that the name submission is successful. Here, the default method is GET submission, so the url address bar will be displayed. It will be mentioned later here, so don’t worry about it now.
Input type="button" is the button value attribute to modify the text on the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="保存到草稿箱"/>
</form>
</body>
Input type="file" is the text upload field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="保存到草稿箱"/><br/>
<input type="file"/>
</form>
</body>
After clicking the select file button, a dialog box for selecting a file will pop up automatically
Input type="hidden" is a hidden field. When we want to send some information, and this information does not require user participation, we can use the hidden field (developed and sent to the server at the same time when submitting)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="保存到草稿箱"/><br/>
<input type="hidden"/>
<input type="file" name="abc" value ="acc"/>
</form>
</body>
Hidden fields are not displayed on the page
The select tag is a drop-down list box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="保存到草稿箱"/><br/>
国籍：<select>
<option>--请选择国籍--<option/>
<option>中国<option/>
<option>俄罗斯<option/>
<option>巴基斯坦<option/>
<select/>
</form>
</body>
The textarea tag indicates the multi-line text input box.
The rows attribute setting can display the height of several lines.
The cols attribute setting can display several characters width for each row``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
用户名：<input type = "text"/ value="请输入你的名字"/><br/>
密码：<input type="password" value="请输入你的密码"/><br/>
性别：<input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女<br/>
你最喜欢的语言是<br/>
<input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="保存到草稿箱"/><br/>
国籍：<select>
<option>--请选择国籍--<option/>
<option>中国<option/>
<option>俄罗斯<option/>
<option>巴基斯坦<option/>
<select/><br/>
自我评价：<textarea rows="5" cols="20">请进行客观的评价</textarea>
</form>
</body>
At present, a simple form submission page has been prepared, but this style is not very beautiful, we can use the table tag to format the page more beautifully
The table label is the table label
tr is the row label
th is the column label
td is the cell label
b label is the bold label
colspan attribute setting across rows
rowspan attribute setting across rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form>
<table>
<tr>
<td>用户名：</td>
<td><input type = "text"/ value="请输入你的名字"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="请输入你的密码"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女</td>
</tr>
<tr>
<td>你最喜欢的语言是</td>
<td><input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++</td>
</tr>
<tr>
<td>国籍：</td>
<td><select>
<option>--请选择国籍--<option/>
<option>中国<option/>
<option>俄罗斯<option/>
<option>巴基斯坦<option/>
<select/></td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea rows="5" cols="20">请进行客观的评价</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td><input type="button" value="保存到草稿箱"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
When the form is submitted, there are three situations where the data is not sent to the server.
1. The form does not have a name attribute value.
2. Both single-selection and multi-selection (option tags in the drop-down list) need to add value attributes to send to the server.
3. Form items Not in the from tag of the commit
Features of GET request:
1. The address in the address bar of the browser is the action attribute [+?+request parameter]
The format of the request parameter is: name=value&name=value
2. It is not safe
3. It has a limit on the data length
of the POST request Features:
1. There is only action attribute in the browser address bar
2. It is safer than GET request
The action attribute sets the submitted server URL
method attribute setting sets the submission method GET (default value) or POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login"/>
<table>
<tr>
<td>用户名：</td>
<td><input type = "text"/ value="请输入你的名字"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" value="请输入你的密码"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name = "sex"/>男
<input type="radio" name = "sex" checked="checked"/>女</td>
</tr>
<tr>
<td>你最喜欢的语言是</td>
<td><input type="checkbox" checked="checked"/>java
<input type="checkbox" />python
<input type="checkbox" />c++</td>
</tr>
<tr>
<td>国籍：</td>
<td><select name="country">
<option>--请选择国籍--<option/>
<option>中国<option/>
<option>俄罗斯<option/>
<option>巴基斯坦<option/>
<select/></td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea name="desc" rows="5" cols="20">请进行客观的评价</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td><input type="button" value="保存到草稿箱"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
Now click the submit button, the page will submit the data to http://localhost:8080, and the submitted content will not be displayed in the url address bar, which protects the user's privacy.
