HTML form and the use of form internal tags

HTML form and the use of form internal tags

Copy code
The code is as follows:

<html>
<head>
<title>Use of form</title>
<!--
Tag name: form Form tag attributes: action: submission destination, target address URL
method: Set the method of submitting the request, get and post; the default is get
What is the difference between get and post submission? ------------------------
Get transmission: The content information is placed in the address bar for transmission, and the length is limited to 1k, and the security is not good.
Post transmission: transmit the content in the body information. There is no length limit.
Sub-tags:
Input tag: The value needs to be submitted and must have a name attribute.
Attributes: type: password, etc.
//------------
Through the demonstration of the following example, it is found that in some cases, form can be used to make a link, and at the same time as making the link, data can be submitted to the address file of the target.
fieldset tag: define domain
Legend tag: define the title of the domain
-->
</head>
<body>
<fieldset>
<legend>form form tag, subtag example:</legend>
<form action="01 List.html" method="get">
<table border="1px" width="800px">
<tr>
List Tags:

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

</tr>
<tr>
Checkbox example:

I like bicycles:
<input type="checkbox" name="Bike">

I like cars:
<input type="checkbox" name="Car">

</tr>
<tr>
Radio Buttons:

male:
<input type="radio" checked="checked" name="Sex" value="male">

female:
<input type="radio" name="Sex" value="female">
</form>
<p>When the user clicks a radio button, that button becomes selected and all other buttons become unselected. </p>
</tr>
<tr>
Text field:

<textarea rows="10" cols="30">Use of text area tags</textarea>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Account:</td>
<td>
<input name="userid">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input name="pwd">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Confirm submission"/>
</td>
<td>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>

Any tag with name and value attributes can be placed inside the form, and the data of these tags can also be submitted to another URL.

<<:  vue dynamic component

>>:  Mobile Internet Era: Responsive Web Design Has Become a General Trend

Recommend

MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure

Recently, there is a particularly abnormal busine...

Implementation of Docker cross-host network (manual)

1. Introduction to Macvlan Before the emergence o...

How to hide the version number in Nginx

Nginx hides version number In a production enviro...

Detailed explanation of three ways to wrap text in el-table header

Table of contents Problem Description Rendering T...

Using CSS3 to create header animation effects

Netease Kanyouxi official website (http://kanyoux...

CSS3 transition rotation perspective 2d3d animation and other effects example code

Table of contents CSS3 Box Model a. CSS3 filter b...

JavaScript implements a box that follows the mouse movement

This article shares the specific code of JavaScri...

Nginx location matching rule example

1. Grammar location [=|~|~*|^~|@] /uri/ { ... } 2...

CSS complete parallax scrolling effect

1. What is Parallax scrolling refers to the movem...

JS ES new feature of variable decoupling assignment

Table of contents 1. Decoupled assignment of arra...

JavaScript implements H5 gold coin function (example code)

Today I made a Spring Festival gold coin red enve...

Detailed explanation of MySQL execution plan

The EXPLAIN statement provides information about ...

Linux kernel device driver kernel debugging technical notes collation

/****************** * Kernel debugging technology...

MySQL Community Server compressed package installation and configuration method

Today, because I wanted to install MySQL, I went ...

How to quickly return to the top from the bottom when there is too much content on the web page

In web front-end development, it is inevitable to ...