Home Web Front-end HTML Tutorial Form elements: the most comprehensive summary of how to obtain and use various html form elements

Form elements: the most comprehensive summary of how to obtain and use various html form elements

May 31, 2017 pm 04:46 PM

A form is an interaction tool between web pages and users. It consists of a

element as a container, encapsulating any number of other form controls, as well as any other tags available in the element. The form can Contains form control elements such as , ,

1. New form elements and usage examples in HTML5

##1. Summary of how to use new form elements in HTML5 and practical tutorials

Form elements: the most comprehensive summary of how to obtain and use various html form elements

## HTML5 new form element

: The tag defines a list of options. Use this element in conjunction with an input element to define the possible values ​​of the input.

: The tag specifies the key pair generator field used for the form.

: The tag defines different types of output, such as the output of a script.

2.Comprehensive understanding of HTML Form form elementsThe datalist element specifies a list of options for the input field.

The list is created through the option element in the datalist. If you need to bind the datalist to the input field, please use the list attribute of the input field to reference the id of the datalist.

The keygen element is a key-pair generator. When the form is submitted, two keys are generated, one is the private key and the other is the public key. The private key is stored on the client, and the public key is sent to the server.

The output element is used for different types of output, such as calculation or script output.


##2. Detailed explanation of form elements in PHP 1. Introduction to PHP form elements: select field tags and text field tags

By selecting the field tags

2. Introduction to PHP form elements: input field tag

Input field tag is a form One of the most commonly used tags in . Commonly used input field tags include text boxes, buttons, radio buttons, check boxes, etc. Form elements: the most comprehensive summary of how to obtain and use various html form elements

3.

Example of PHP processing Checkbox multi-select box form element

The checkbox value acquisition method is different from the ordinary input acquisition method. A unified value needs to be given to the checkbox Name in the form of an array, such as mycheckbox[], is a way to define an array in PHP. Then get this data in the background, such as $_POST['mycheckbox'] of the POST form. At this time, the data is already an array.

3. JavaScript and jquery to obtain and use form elements

1. Several ways to obtain form elements in javascript

The first method is to get it through the name of the element

The second method is to get it through the index of the element

The third method is to get it through the id of the element

2.

jQuery code for processing form elements

1). Get the value of the input class: $("input").val();

2). Get the value of the textarea class: $("textarea").val();

3). Get the value of the select class: $("select").val();

When the form contains multiple input classes (or textarea classes and select classes), use the above The method will get an array. Of course, you can add IDs to these controls to get the value of a specific control, for example: $("input#myID").val().

Questions and answers related to form elements:

1. Front-end - Is there a problem with the relative movement of the page when the form element is clicked on the mobile terminal?

2. javascript - How to get the internal value of the React-bootstrap form element control in react

3. How to get the form in javascript Element select

【Related recommendations】

1. php.cnOriginal html5 video tutorial

2. 《php. cn Dugu Jiujian (4) - php video tutorial"

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Form elements: the most comprehensive summary of how to obtain and use various html form elements. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use DirectX repair tool? Detailed usage of DirectX repair tool How to use DirectX repair tool? Detailed usage of DirectX repair tool Mar 15, 2024 am 08:31 AM

The DirectX repair tool is a professional system tool. Its main function is to detect the DirectX status of the current system. If an abnormality is found, it can be repaired directly. There may be many users who don’t know how to use the DirectX repair tool. Let’s take a look at the detailed tutorial below. 1. Use repair tool software to perform repair detection. 2. If it prompts that there is an abnormal problem in the C++ component after the repair is completed, please click the Cancel button, and then click the Tools menu bar. 3. Click the Options button, select the extension, and click the Start Extension button. 4. After the expansion is completed, re-detect and repair it. 5. If the problem is still not solved after the repair tool operation is completed, you can try to uninstall and reinstall the program that reported the error.

Introduction to HTTP 525 status code: explore its definition and application Introduction to HTTP 525 status code: explore its definition and application Feb 18, 2024 pm 10:12 PM

Introduction to HTTP 525 status code: Understand its definition and usage HTTP (HypertextTransferProtocol) 525 status code means that an error occurred on the server during the SSL handshake, resulting in the inability to establish a secure connection. The server returns this status code when an error occurs during the Transport Layer Security (TLS) handshake. This status code falls into the server error category and usually indicates a server configuration or setup problem. When the client tries to connect to the server via HTTPS, the server has no

Where to get Google security code Where to get Google security code Mar 30, 2024 am 11:11 AM

Google Authenticator is a tool used to protect the security of user accounts, and its key is important information used to generate dynamic verification codes. If you forget the key of Google Authenticator and can only verify it through the security code, then the editor of this website will bring you a detailed introduction on where to get the Google security code. I hope it can help you. If you want to know more Users please continue reading below! First open the phone settings and enter the settings page. Scroll down the page and find Google. Go to the Google page and click on Google Account. Enter the account page and click View under the verification code. Enter your password or use your fingerprint to verify your identity. Obtain a Google security code and use the security code to verify your Google identity.

How to use Baidu Netdisk-How to use Baidu Netdisk How to use Baidu Netdisk-How to use Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Many friends still don’t know how to use Baidu Netdisk, so the editor will explain how to use Baidu Netdisk below. If you are in need, hurry up and take a look. I believe it will be helpful to everyone. Step 1: Log in directly after installing Baidu Netdisk (as shown in the picture); Step 2: Then select "My Sharing" and "Transfer List" according to the page prompts (as shown in the picture); Step 3: In "Friend Sharing", you can share pictures and files directly with friends (as shown in the picture); Step 4: Then select "Share" and then select computer files or network disk files (as shown in the picture); Fifth Step 1: Then you can find friends (as shown in the picture); Step 6: You can also find the functions you need in the "Function Treasure Box" (as shown in the picture). The above is the editor’s opinion

Learn to copy and paste quickly Learn to copy and paste quickly Feb 18, 2024 pm 03:25 PM

How to use the copy-paste shortcut keys Copy-paste is an operation we often encounter when using computers every day. In order to improve work efficiency, it is very important to master the copy and paste shortcut keys. This article will introduce some commonly used copy and paste shortcut keys to help readers perform copy and paste operations more conveniently. Copy shortcut key: Ctrl+CCtrl+C is the shortcut key for copying. By holding down the Ctrl key and then pressing the C key, you can copy the selected text, files, pictures, etc. to the clipboard. To use this shortcut key,

What is the KMS activation tool? How to use the KMS activation tool? How to use KMS activation tool? What is the KMS activation tool? How to use the KMS activation tool? How to use KMS activation tool? Mar 18, 2024 am 11:07 AM

The KMS Activation Tool is a software tool used to activate Microsoft Windows and Office products. KMS is the abbreviation of KeyManagementService, which is key management service. The KMS activation tool simulates the functions of the KMS server so that the computer can connect to the virtual KMS server to activate Windows and Office products. The KMS activation tool is small in size and powerful in function. It can be permanently activated with one click. It can activate any version of the window system and any version of Office software without being connected to the Internet. It is currently the most successful and frequently updated Windows activation tool. Today I will introduce it Let me introduce to you the kms activation work

How to use potplayer-How to use potplayer How to use potplayer-How to use potplayer Mar 04, 2024 pm 06:10 PM

Potplayer is a very powerful media player, but many friends still don’t know how to use potplayer. Today I will introduce how to use potplayer in detail, hoping to help everyone. 1. PotPlayer shortcut keys. The default common shortcut keys for PotPlayer player are as follows: (1) Play/pause: space (2) Volume: mouse wheel, up and down arrow keys (3) forward/backward: left and right arrow keys (4) bookmark: P- Add bookmarks, H-view bookmarks (5) full screen/restore: Enter (6) multiple speeds: C-accelerate, 7) Previous/next frame: D/

How to merge cells using shortcut keys How to merge cells using shortcut keys Feb 26, 2024 am 10:27 AM

How to use the shortcut keys for merging cells In daily work, we often need to edit and format tables. Merging cells is a common operation that can merge multiple adjacent cells into one cell to improve the beauty of the table and the information display effect. In mainstream spreadsheet software such as Microsoft Excel and Google Sheets, the operation of merging cells is very simple and can be achieved through shortcut keys. The following will introduce the shortcut key usage for merging cells in these two software. exist

See all articles