Home > Developer > JavaScript
Readonly and Disabled are two attributes used in a form. They both enable users not to change the content in the form field. However, there are minor differences between them, which are summarized as follows:
Readonly is only valid for input (text/password) and textarea, while disabled is valid for all form elements, including select, radio, checkbox, And button. However, after a form element is disabled, when we submit the form in POST or GET mode, the value of this element will not be passed out, readonly will pass this value out (this occurs when we set the textarea element in a form to disabled or readonly, but the submit button is usable ).
Example
Copy codeThe Code is as follows:
Body>
<Form id = "form1" name = "form1" method = "get" action = "">
<Input name = "q1" type = "text" id = "q1" value = "readonly" readonly = "true"/>
<Input name = "q2" type = "text" disabled = "disabled" id = "q2" value = "disabled"/>
<Input type = "submit" name = "Submit" value = "Submit"/>
</Form>
Js control code
Copy codeThe Code is as follows:
<Body>
<Form enctype = "multipart/form-data" action = "sign. php" method = "post" name = "moblie_act_form" id = "moblie_act_form">
<Input type = "text" class = "input" id = "mobile" name = "mobile" value = "{$ mobile}" readonly = "true" disabled = "disabled">
<Input type = "button" value = "modify" onClick = "modify_phone ()">
</Form>
</Html>
<Script language = "javascript">
Function modify_phone (){
If (confirm ("are you sure you want to modify your mobile phone number? ")){
Document. moblie_act_form.mobile.readOnly = false;
Document. moblie_act_form.mobile.disabled = false;
}
Return true;
}
</Script>
Instance
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Untitled Document </title>
</Head>
<Body>
<Form id = "form1" name = "form1" method = "get" action = "">
<Input name = "q1" type = "text" id = "q1" value = "readonly" readonly = "true"/>
<Input name = "q2" type = "text" disabled = "disabled" id = "q2" value = "disabled"/>
<Input type = "submit" name = "Submit" value = "Submit"/>
</Form>
</Body>
</Html>
Property value description disabled
This element is disabled when the input element is loaded for the first time, so that the user cannot write or select it.
Note: it cannot be used with type = "hidden.
Readonly
Indicates that the value of this field cannot be modified.
Note: it can only be used with type = "text.
Summary
Readonly code: <input type = "text" name = "readonly" readonly = "readonly"/>
Readonly cannot be edited, can be copied, can be selected, can receive focus but cannot be modified, the background will receive the pass value.
Disabled code: <input type = "text" name = "disabled" disabled = "disabled"/>
Disabled cannot be edited, cannot be copied, cannot be selected, cannot receive focus, and no value is received in the background
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
