{"id":9349,"date":"2022-10-06T05:03:35","date_gmt":"2022-10-06T05:03:35","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9349"},"modified":"2022-10-06T05:03:35","modified_gmt":"2022-10-06T05:03:35","slug":"html-disabled-attribute","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/html-disabled-attribute\/","title":{"rendered":"HTML disabled Attribute"},"content":{"rendered":"\n

The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled.<\/p>\n\n\n\n

This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Then, it is possible to make the element usable again, removing the disabled value by JavaScript. The disabled attribute is commonly grayed out.<\/p>\n\n\n\n

You can use the\u00a0disabled\u00a0attribute on the following elements:\u00a0<button>,\u00a0<fieldset>,\u00a0<input>,\u00a0<optgroup>,\u00a0<option>,\u00a0<select>, and\u00a0<textarea>.<\/p>\n\n\n\n

When the\u00a0disabled\u00a0attribute is applied to an element, the\u00a0:disabled\u00a0pseudo-class also applies to it. The elements supporting the\u00a0disabled\u00a0attribute but not having the attribute set match the\u00a0:enabled\u00a0pseudo-class.<\/p>\n\n\n\n

Syntax<\/h2>\n\n\n\n
<tag disabled><\/tag><\/code><\/pre>\n\n\n\n
Example of the HTML disabled attribute used on the <button> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <button type=\"button\">Button<\/button> <br><br>\n    <button type=\"button\" disabled>Disabled button<\/button>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the HTML disabled attribute used on the <fieldset> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n    <style>\n      div {\n        margin-bottom: 10px;\n      }\n      label {\n        display: inline-block;\n        width: 120px;\n      }\n      fieldset {\n        background: #e1eff2;\n      }\n      legend {\n        padding: 20px 0;\n        font-size: 22px;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <form>\n      <fieldset disabled>\n        <legend>Personal Information:<\/legend>\n        <div>\n          <label>First Name:<\/label>\n          <input type=\"text\">\n        <\/div>\n        <div>\n          <label>Last Name:<\/label>\n          <input type=\"text\">\n        <\/div>\n        <div>\n          <label>Date of birth:<\/label>\n          <input type=\"text\">\n        <\/div>\n      <\/fieldset>\n    <\/form>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
When a <fieldset> is disabled, all descendant form controls are also disabled except for the form controls within the\u00a0<legend>\u00a0element.<\/p>\n\n\n\n
Example of the HTML disabled attribute used on the <input> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <form action=\"#\" method=\"get\">\n      <input type=\"text\" name=\"name\" placeholder=\"Enter your name\" \/>\n      <input type=\"number\" name=\"Date of birth:\" placeholder=\"Date of birth:\" disabled\/>\n      <input type=\"submit\" value=\"Submit\" \/>\n    <\/form>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the HTML disabled attribute used on the <optgroup> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <select>\n      <optgroup label=\"Books\" disabled>\n        <option value=\"html\">HTML<\/option>\n        <option value=\"css\">CSS<\/option>\n      <\/optgroup>\n      <optgroup label=\"Snippets\">\n        <option value=\"java\">Java<\/option>\n        <option value=\"linux\">Linux<\/option>\n        <option value=\"git\">Git<\/option>\n      <\/optgroup>\n    <\/select>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the HTML disabled attribute used on the <option> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <form>\n      <select>\n        <option value=\"computers\">Computer<\/option>\n        <option value=\"notebook\">Notebook<\/option>\n        <option value=\"tablet\" disabled>Tablet<\/option>\n      <\/select>\n    <\/form>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the HTML disabled attribute used on the <select> element:<\/h3>\n\n\n\n
<!DOCTYPE html> <html> <head> <title>Title of the document<\/title> <\/head> <body> <form> <select disabled> <option value=\"books\">Books<\/option> <option value=\"html\">HTML<\/option> <option value=\"css\">CSS<\/option> <option value=\"php\">PHP<\/option> <option value=\"js\">JavaScript<\/option> <\/select> <\/form> <\/body> <\/html><\/code><\/h3>\n\n\n\n
Example of the HTML disabled attribute used on the <textarea> element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <form> \n      <textarea name=\"comment\" rows=\"8\" cols=\"50\" disabled>Send your comments to the author.<\/textarea>\n    <\/form>\n  <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled. This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Then, it is possible to make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9349"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9349"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9349\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}