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

Use the njs module to introduce js scripts in nginx configuration

Table of contents Preface 1. Install NJS module M...

MySQL Failover Notes: Application-Aware Design Detailed Explanation

1. Introduction As we all know, in the applicatio...

Installation steps of Ubuntu 20.04 double pinyin input method

1. Set up Chinese input method 2. Set the double ...

How to install MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Download the MySQL installation package (there...

How to use http and WebSocket in CocosCreator

Table of contents 1. HttpGET 2. HTTP POST WebSock...

Say goodbye to hard coding and let your front-end table automatically calculate the instance code

Preface When my team was developing the tax syste...

How to install docker using YUM

As shown in the following figure: If the version ...

jQuery implements all shopping cart functions

Table of contents 1. Select All 2. Increase or de...

Implementation steps for installing Redis container in Docker

Table of contents Install Redis on Docker 1. Find...

Introduction to Sublime Text 2, a web front-end tool

Sublime Text 2 is a lightweight, simple, efficien...

JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)

This article shares the specific code of JavaScri...

Discussion on CSS style priority and cascading order

In general : [1 important flag] > [4 special fl...

Detailed explanation of docker's high availability configuration

Docker Compose Docker Compose divides the managed...

Implementation of Docker Compose multi-container deployment

Table of contents 1. WordPress deployment 1. Prep...

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mal...