{"id":258,"date":"2024-05-21T10:11:16","date_gmt":"2024-05-21T08:11:16","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=258"},"modified":"2024-05-21T10:11:16","modified_gmt":"2024-05-21T08:11:16","slug":"57-atributos-html-para-input","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/57-atributos-html-para-input\/","title":{"rendered":"57. Atributos HTML para input"},"content":{"rendered":"\n

El atributo value<\/em> <\/strong>especifica un valor inicial para un campo de entrada.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"><br>\n  <label for=\"lname\">Last name:<\/label><br>\n  <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\">\n<\/form><\/pre>\n\n\n\n
El atributo readonly<\/h2>\n\n\n\n
El atributo readonly<\/em> <\/strong>de entrada especifica que un campo de entrada es de solo lectura. Un campo de entrada de solo lectura no se puede modificar (sin embargo, un usuario puede tabular, resaltarlo y copiar el texto). \u00a1El valor de un campo de entrada de solo lectura se enviar\u00e1 al enviar el formulario!.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\" readonly><br>\n  <label for=\"lname\">Last name:<\/label><br>\n  <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\">\n<\/form><\/pre>\n\n\n\n
El atributo disabled<\/h2>\n\n\n\n
El atributo de entrada disabled<\/em> <\/strong>especifica que un campo de entrada debe estar deshabilitado. Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic. \u00a1El valor de un campo de entrada disabled<\/em> <\/strong>no se enviar\u00e1 al enviar el formulario!.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\" disabled><br>\n  <label for=\"lname\">Last name:<\/label><br>\n  <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\">\n<\/form><\/pre>\n\n\n\n
El atributo size<\/h2>\n\n\n\n
El atributo size<\/em> <\/strong>especifica el ancho visible, en caracteres, de un campo de entrada.<\/p>\n\n\n\n
El valor predeterminado para el tama\u00f1o es 20.<\/p>\n\n\n\n
\n
Nota<\/strong>: el atributo size<\/em><\/strong> funciona con los siguientes tipos de entrada: text<\/em><\/strong>, search<\/em><\/strong>, tel<\/em><\/strong>, url<\/em><\/strong>, email<\/em><\/strong> y password<\/em><\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" size=\"50\"><br>\n  <label for=\"pin\">PIN:<\/label><br>\n  <input type=\"text\" id=\"pin\" name=\"pin\" size=\"4\">\n<\/form><\/pre>\n\n\n\n
El atributo maxlength<\/h2>\n\n\n\n
El atributo input maxlength<\/em> <\/strong>especifica el n\u00famero m\u00e1ximo de caracteres permitidos en un campo de entrada.<\/p>\n\n\n\n
\n
Nota<\/strong>: cuando se establece una longitud m\u00e1xima, el campo de entrada no aceptar\u00e1 m\u00e1s de la cantidad de caracteres especificada. Sin embargo, este atributo no proporciona ning\u00fan comentario. Entonces, si desea alertar al usuario, debe escribir c\u00f3digo JavaScript.<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" size=\"50\"><br>\n  <label for=\"pin\">PIN:<\/label><br>\n  <input type=\"text\" id=\"pin\" name=\"pin\" maxlength=\"4\" size=\"4\">\n<\/form><\/pre>\n\n\n\n
Los atributo min y max<\/h2>\n\n\n\n
Los atributos de entrada min<\/em> <\/strong>y max<\/em> <\/strong>especifican los valores m\u00ednimo y m\u00e1ximo para un campo de entrada.<\/p>\n\n\n\n
Los atributos min<\/em> <\/strong>y max<\/em> <\/strong>funcionan con los siguientes tipos de entrada: number<\/em><\/strong>, range<\/em><\/strong>, date, datetime-local<\/em><\/strong>, month<\/em><\/strong>, hour<\/em><\/strong> y week<\/em><\/strong>.<\/p>\n\n\n\n
\n
Sugerencia<\/strong>: use los atributos max<\/em> <\/strong>y min<\/em> <\/strong>juntos para crear un rango de valores legales.<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"datemax\">Enter a date before 1980-01-01:<\/label>\n  <input type=\"date\" id=\"datemax\" name=\"datemax\" max=\"1979-12-31\"><br><br>\n\n  <label for=\"datemin\">Enter a date after 2000-01-01:<\/label>\n  <input type=\"date\" id=\"datemin\" name=\"datemin\" min=\"2000-01-02\"><br><br>\n\n  <label for=\"quantity\">Quantity (between 1 and 5):<\/label>\n  <input type=\"number\" id=\"quantity\" name=\"quantity\" min=\"1\" max=\"5\">\n<\/form><\/pre>\n\n\n\n
El atributo multiple<\/h2>\n\n\n\n
El atributo de entrada multiple<\/em> <\/strong>especifica que el usuario puede ingresar m\u00e1s de un valor en un campo de entrada. El atributo m\u00faltiple<\/em> <\/strong>funciona con los siguientes tipos de entrada: email<\/em><\/strong> y file<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"files\">Select files:<\/label>\n  <input type=\"file\" id=\"files\" name=\"files\" multiple>\n<\/form><\/pre>\n\n\n\n
El atributo pattern<\/h2>\n\n\n\n
El atributo pattern<\/em><\/strong> de entrada especifica una expresi\u00f3n regular con la que se comprueba el valor del campo de entrada cuando se env\u00eda el formulario.<\/p>\n\n\n\n
El atributo pattern<\/em><\/strong> funciona con los siguientes tipos de entrada: text<\/em><\/strong>, date<\/em><\/strong>, search<\/em><\/strong>, URL<\/em><\/strong>, tel<\/em><\/strong>, email<\/em> <\/strong>y password<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"country_code\">Country code:<\/label>\n  <input type=\"text\" id=\"country_code\" name=\"country_code\"\n  pattern=\"[A-Za-z]{3}\" title=\"Three letter country code\">\n<\/form><\/pre>\n\n\n\n
El atributo placeholder<\/h2>\n\n\n\n
El atributo placeholder<\/em> <\/strong>especifica una sugerencia breve que describe el valor esperado de un campo de entrada (un valor de muestra o una descripci\u00f3n breve del formato esperado).<\/p>\n\n\n\n
La sugerencia breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.<\/p>\n\n\n\n
El atributo placeholder<\/em> <\/strong>funciona con los siguientes tipos de entrada: text<\/em><\/strong>, search<\/em><\/strong>, url<\/em><\/strong>, tel<\/em><\/strong>, email<\/em> <\/strong>y password<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"phone\">Enter a phone number:<\/label>\n  <input type=\"tel\" id=\"phone\" name=\"phone\"\n  placeholder=\"123-45-678\"\n  pattern=\"[0-9]{3}-[0-9]{2}-[0-9]{3}\">\n<\/form><\/pre>\n\n\n\n
El atributo required<\/h2>\n\n\n\n
El atributo de entrada required<\/em><\/strong> especifica que se debe completar un campo de entrada antes de enviar el formulario.<\/p>\n\n\n\n
El atributo required<\/em><\/strong> funciona con los siguientes tipos de entrada: text<\/em><\/strong>, search<\/em><\/strong>, url<\/em><\/strong>, tel<\/em><\/strong>, email<\/em><\/strong>, password<\/em><\/strong>, date pickers<\/em><\/strong>, number<\/em><\/strong>, checkbox<\/em><\/strong>, radio<\/em><\/strong>, y file<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"username\">Username:<\/label>\n  <input type=\"text\" id=\"username\" name=\"username\" required>\n<\/form><\/pre>\n\n\n\n
El atributo step<\/h2>\n\n\n\n
El atributo step<\/em><\/strong> especifica los intervalos de n\u00fameros legales para un campo de entrada.<\/p>\n\n\n\n
Ejemplo: si step= \u00ab3\u00bb<\/em><\/strong>, los n\u00fameros legales podr\u00edan ser -3, 0, 3, 6, etc.<\/p>\n\n\n\n
\n
Sugerencia<\/strong>: este atributo se puede usar junto con los atributos max<\/em><\/strong> y min<\/em><\/strong> para crear un rango de valores legales.<\/p>\n<\/blockquote>\n\n\n\n
El atributo step<\/em><\/strong> funciona con los siguientes tipos de entrada: number<\/em><\/strong>, range<\/em><\/strong>, date<\/em><\/strong>, datetime-local<\/em><\/strong>, month<\/em><\/strong>, time<\/em> <\/strong>y week<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"points\">Points:<\/label>\n  <input type=\"number\" id=\"points\" name=\"points\" step=\"3\">\n<\/form><\/pre>\n\n\n\n
El atributo autofocus<\/h2>\n\n\n\n
El atributo autofocus<\/em> <\/strong>especifica que un campo de entrada debe enfocarse autom\u00e1ticamente cuando se carga la p\u00e1gina.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" autofocus><br>\n  <label for=\"lname\">Last name:<\/label><br>\n  <input type=\"text\" id=\"lname\" name=\"lname\">\n<\/form><\/pre>\n\n\n\n
Los atributos height y width<\/h2>\n\n\n\n
Los atributos height<\/em> <\/strong>y width<\/em> <\/strong>especifican la altura y la anchura de un elemento <input type=\u00bbimage\u00bb><\/em><\/strong>.<\/p>\n\n\n\n
\n
Sugerencia<\/strong>: especifique siempre los atributos height<\/em><\/strong> y width<\/em><\/strong> de las im\u00e1genes. Si se establecen alto y ancho, el espacio requerido para la imagen se reserva cuando se carga la p\u00e1gina. Sin estos atributos, el navegador no conoce el tama\u00f1o de la imagen y no puede reservarle el espacio adecuado. El efecto ser\u00e1 que el dise\u00f1o de la p\u00e1gina cambiar\u00e1 durante la carga (mientras se cargan las im\u00e1genes).<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <label for=\"fname\">First name:<\/label>\n  <input type=\"text\" id=\"fname\" name=\"fname\"><br><br>\n  <label for=\"lname\">Last name:<\/label>\n  <input type=\"text\" id=\"lname\" name=\"lname\"><br><br>\n  <input type=\"image\" src=\"img_submit.gif\" alt=\"Submit\" width=\"48\" height=\"48\">\n<\/form><\/pre>\n\n\n\n
El atributo list<\/h2>\n\n\n\n
El atributo list<\/em> <\/strong>hace referencia a un elemento <datalist><\/em><\/strong> que contiene opciones predefinidas para un elemento <input><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form>\n  <input list=\"browsers\">\n  <datalist id=\"browsers\">\n    <option value=\"Internet Explorer\">\n    <option value=\"Firefox\">\n    <option value=\"Chrome\">\n    <option value=\"Opera\">\n    <option value=\"Safari\">\n  <\/datalist>\n<\/form><\/pre>\n\n\n\n
El atributo autocomplete<\/h2>\n\n\n\n
El atributo autocomplete<\/em><\/strong> especifica si un formulario o un campo de entrada debe tener la funci\u00f3n de autocompletar activada o desactivada.<\/p>\n\n\n\n
autocomplete<\/em> <\/strong>permite que el navegador prediga el valor. Cuando un usuario comienza a escribir en un campo, el navegador debe mostrar opciones para completar el campo, en funci\u00f3n de los valores escritos anteriormente.<\/p>\n\n\n\n
El atributo autocomplete<\/em> <\/strong>funciona con <form><\/em><\/strong> y los siguientes tipos de <input><\/em><\/strong>: text<\/em><\/strong>, search<\/em><\/strong>, url<\/em><\/strong>, tel<\/em><\/strong>, email<\/em><\/strong>, password<\/em><\/strong>, datepickers<\/em><\/strong>, range<\/em><\/strong>, y color<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form action=\"\/action_page.php\" autocomplete=\"on\">\n  <label for=\"fname\">First name:<\/label>\n  <input type=\"text\" id=\"fname\" name=\"fname\"><br><br>\n  <label for=\"lname\">Last name:<\/label>\n  <input type=\"text\" id=\"lname\" name=\"lname\"><br><br>\n  <label for=\"email\">Email:<\/label>\n  <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"off\"><br><br>\n  <input type=\"submit\" value=\"Submit\">\n<\/form><\/pre>\n","protected":false},"excerpt":{"rendered":"
El atributo value especifica un valor inicial para un campo de entrada. Ejm <form>   <label for=\u00bbfname\u00bb>First name:<\/label><br>   <input type=\u00bbtext\u00bb id=\u00bbfname\u00bb name=\u00bbfname\u00bb value=\u00bbJohn\u00bb><br>   <label for=\u00bblname\u00bb>Last name:<\/label><br>   <input type=\u00bbtext\u00bb id=\u00bblname\u00bb name=\u00bblname\u00bb value=\u00bbDoe\u00bb> <\/form> El…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":56,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-258","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"El atributo value especifica un valor inicial para un campo de entrada. Ejm <form>   <label for=\"fname\">First name:<\/label><br>   <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"><br>   <label for=\"lname\">Last name:<\/label><br>   <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"> <\/form> El...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/258\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/258\/revisions\/260"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}