Two methods to disable form controls in HTML: readonly and disabled

In the process of making web pages, we often use forms. But sometimes we want the controls on the form to be unchangeable. For example, in a password modification web page, the text box that displays the user name should be unchangeable.

There are two ways to disable in HTML, they are:

1. Add the readonly='readonly' attribute to the control tag
2. Add the disabled='disabled' attribute to the control tag

Example:

Copy code

The code is as follows:

Both controls in the example are not editable. But they also have some differences!

From the literal meaning, we can know that a control with the readonly attribute is "read-only", while a control with the disabled attribute is "disabled". So what is the difference between them?

The user cannot modify the value of a read-only control (a control that uses the readonly attribute) with the mouse or keyboard, but the programmer can modify it with JavaScript. When the form is submitted, the name and value of the control will be submitted to the server, which means it is visible to the server.

Disabled controls (controls with the disabled attribute) cannot be modified by users with the mouse and keyboard, and are also invisible to the server. That is, their names and values are not submitted to the server when the form is submitted. Of course, programmers can also use JavaScript to modify their values.

This is their difference. After knowing the difference, we should know when to use which method, and we must not be blind!

<<: Syntax alias problem based on delete in mysql

>>: How to use CSS pseudo-elements to control the style of several consecutive elements

Docker beginners' first exploration of common commands practice records

Two methods to disable form controls in HTML: readonly and disabled

Docker beginners' first exploration of common commands practice records

Understand the use of CSS3's all attribute

Solution for mobile browsers not supporting position: fix

js to achieve waterfall flow layout (infinite loading)

Detailed explanation of mysql integrity constraints example

A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines

Implementation of whack-a-mole game in JavaScript

Five ways to traverse JavaScript arrays

JavaScript implements asynchronous submission of form data

VMWare Linux MySQL 5.7.13 installation and configuration tutorial

Recommend

How to implement the webpage anti-copying function (with cracking method)

CSS3 sets a mask for the background image and solves the problem of mask style inheritance

Solve the problem of MYSQL connection port being occupied and introducing file path errors

Use JavaScript to create page effects

Quickly get started with VUE 3 teleport components and usage syntax

js to achieve a simple magnifying glass effect

Summary of XHTML application in web design study

Sample code for seamless scrolling with flex layout

Command to remove (delete) symbolic link in Linux

Docker meets Intellij IDEA, Java development improves productivity tenfold

What are the benefits of using // instead of http:// (adaptive https)

Javascript tree menu (11 items)

Complete Tutorial on Deploying Java Web Project on Linux Server

HTML+CSS+JavaScript to achieve list loop scrolling example code

Detailed explanation of CocosCreator Huarongdao digital puzzle