Difference between :disabled and :readonly in HTML?

Asked

Viewed 60,985 times

41

Usually both have similar behaviors when rendered in the browser.

If I open an HTML with this:

<input type="text" value="tente me alterar" disabled>
<input type="text" value="tente me alterar" readonly>

Both do not allow the user to change the text, see the example below:

 <input type="text" value="tente me alterar" disabled>
 <input type="text" value="tente me alterar" readonly>

So what’s the difference between the two types of states, and when I should use each of them?

html

4 answers

51


Disabled does not pass the value to the user, and can not edit.

Readonly sends the value to the form and also cannot edit.

Assuming you have this html:

<form method="post" action="page.php">
    <input type="text" name="foo" value="foo" disabled="disabled" />
    <input type="text" name="bar" value="bar" readonly="readonly" />
</form>

Your page 'page php.' will receive only the $_POST['bar']

  • 1

    Another difference is that the default look of the two is different.

22

Disabled you cannot edit or get input value while processing the Form.

Readonly you can at least take the value of the input in the Form processing.

This is the basics. There are a few more nuances:

  • In the Disabled you cannot select the field value to copy it, unlike the Readonly;
  • In the Disabled Tab Cursor does not stop in the field, unlike Readonly;

  • "Take" the value of input as a user, right? Because programmatically you can still ;)

  • Exactly. Let me make it better.

  • It worked for me too. Thanks!

11

Just to complement the replies of @mend3 and @Cigano Morrison Mendez.

Both disabled and readonly are predefined attributes, that is to say, they do not need to receive value for it to work.

Example:

Disabled:
<br>
<input type="text" placeholder="Apenas Disabled" disabled>
<br>
<input type="text" placeholder="Disabled true" disabled="true">
<br>
<input type="text" placeholder="Disabled false" disabled="false">
<br>
<input type="text" placeholder="Disabled goku" disabled="goku">
<br>Readonly:
<br>
<input type="text" placeholder="Apenas readonly" readonly>
<br>
<input type="text" placeholder="Readonly true" readonly="true">
<br>
<input type="text" placeholder="Readonly false" readonly="false">
<br>
<input type="text" placeholder="Readonly goku" readonly="goku">

No point in false, values are ignored and the attribute acts as boolean, either this or this.

4

readonly

This boolean attribute indicates that the user cannot modify the value control. HTML5 This attribute is ignored if the attribute value type for Hidden, range, color, checkbox, radio, file or a type of button.

disabled

This boolean attribute indicates that the form control is not available for interaction. In particular the click event will not be fired on disabled controls. Also, the value of a disabled control is not sent with the form.

Source: Attributes of an element

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.