Hands-on teaching! A big section of html: forms

The form is mainly responsible for the data collection function in the web page. The purpose is to interact with the user input and the server. It is also another big section of html. Therefore, the content of the form is listed separately in this issue. It is almost a hands-on teaching. I hope it can be helpful to you.

First, a form needs a form tag

<form action="" method=""></form>

The value of action is the address of the server where the data is submitted, and the value of method is the method of data submission. There are two attributes: get: query server data and post: modify server data. Post is generally used, because it is more secure , the address bar will not display the submitted content when submitting the form.

Followed by form type

General forms are divided into text boxes, password boxes, submit boxes, radio boxes, check boxes, upload files, reset buttons, picture buttons, drop-down boxes, multi-line text boxes and normal buttons.

name	Attribute value	Form field
Text box	text	input
Password box	password	input
Submit box	submit	input
Single box	radio	input
Checkbox	checkbox	input
Drop down box	option	select
upload files	file	input
Multiline text box	textarea	textarea
Picture button	image	input
Reset button	reset	input
Normal button	button	button

Let’s talk more about

Text box:

<form >
	 文本框:<input type="text" placeholder="提示" name ="name" 	value="默认值">
</form>

Display content:

Here is an explanation, placeholder value sets the prompt text, value sets the default text, and if the disabled attribute is added, the value value is set as unchangeable.

Password box:

<form >
	 密码框:<input type="password" placeholder="提示" >
</form>

Display content:

Submit box:

<form >
	提交框：<input type="submit" value="点击提交">
</form>

Display content:

radio button:

<form >
	单选：<input type="radio" name ="sex"  checked="checked">男
	<input type="radio" name ="sex" >女
</form>

Display content:

Here is an explanation. If the checked attribute is written, it means that this single-selection option is selected by default, and the name value must be set to be consistent to make it one of the two, otherwise multiple selections will occur.
Checkbox:

<form >
爱好:
		<label>
		<input type="checkbox" name="favorite"  />
		唱歌</label>
		<label>
		<input type="checkbox" name="favorite"  />
		跳舞</label>
		<input type="checkbox" name="favorite"  />
		游泳
		<br/>
		<input type="checkbox" name="favorite"  />
		看书
		<input type="checkbox" checked="checked" name="favorite"  />
		玩手机
</form>

Display content:

Let me explain here that if you nest a label tag on an input tag, the box can be selected by clicking on the text.

Drop-down box:

		<form>学历
			<select size="1">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
			<br>
			<br>
			学历
			<select size="3" multiple="multiple">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
		</form>

Display content:

here to explain, selected represents the default value, option sets each drop-down option, multiple represents the display of the slider, and is generally used in conjunction with size. There are several content that can be displayed at one time.

upload files:

		<form>
			<input type="file" />
		</form>

Display content:

Multi-line text box:

		<form>
			多行文本框：
			<br>
			<textarea rows="10" cols="30" >
			</textarea>
		</form>

Display content:

Picture button:

		<form>
			<input type="image" src="1.jpg">
		</form>

The picture can be clicked directly.

Reset button:

		<form action="" method="post">
			<input type="reset" name="" id="" value="重置" />
		</form>

After clicking Reset, all form data will be cleared and set to default values.

Normal button:

		<form action="" method="post">
			<button type="button">同意</button>
		</form>

Display content: The

above covers almost all forms involved, almost hands-on teaching, I hope it will be helpful for you to get started with html or review html. Thanks for watching!