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:<input type="text" value="read-only" readonly="readonly" /> <input type="text" value="Not available" disabled="disabled" /> 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
Recommend
How to implement vertical text alignment with CSS (Summary)
The default arrangement of text in HTML is horizo...
Detailed explanation of MySQL stored procedures, cursors, and transaction examples
Detailed explanation of MySQL stored procedures, ...
Implementation of MySQL asc and desc data sorting
Data sorting asc, desc 1. Single field sorting or...
vue3 timestamp conversion (without using filters)
When vue2 converts timestamps, it generally uses ...
A simple way to call desktop exe programs on a web page
This article mainly introduces how to call desktop...
Detailed explanation of how to use WeChat mini program map
This article example shares the specific implemen...
How to deploy nodejs service using Dockerfile
Initialize Dockerfile Assuming our project is nam...
CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box
In this post, we’ll use the :placeholder-shown ps...
Example code for using CSS to darken the font color of the selected area when scrolling
When encapsulating the date picker, you need to d...
Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0
1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...
Web page text design should be like smart girls wearing clothes
<br />"There are no ugly women in the w...
Implementing countdown effect with javascript
Use Javascript to achieve the countdown effect, f...
MySQL uses aggregate functions to query a single table
Aggregate functions Acts on a set of data and ret...
JavaScript imitates Taobao magnifying glass effect
This article shares the specific code for JavaScr...
JavaScript Composition and Inheritance Explained
Table of contents 1. Introduction 2. Prototype ch...