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 atributo readonly
El atributo readonly 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). ¡El valor de un campo de entrada de solo lectura se enviará al enviar el formulario!.
Ejm
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
El atributo disabled
El atributo de entrada disabled especifica que un campo de entrada debe estar deshabilitado. Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic. ¡El valor de un campo de entrada disabled no se enviará al enviar el formulario!.
Ejm
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
El atributo size
El atributo size especifica el ancho visible, en caracteres, de un campo de entrada.
El valor predeterminado para el tamaño es 20.
Nota: el atributo size funciona con los siguientes tipos de entrada: text, search, tel, url, email y password.
Ejm
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form>
El atributo maxlength
El atributo input maxlength especifica el número máximo de caracteres permitidos en un campo de entrada.
Nota: cuando se establece una longitud máxima, el campo de entrada no aceptará más de la cantidad de caracteres especificada. Sin embargo, este atributo no proporciona ningún comentario. Entonces, si desea alertar al usuario, debe escribir código JavaScript.
Ejm
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form>
Los atributo min y max
Los atributos de entrada min y max especifican los valores mínimo y máximo para un campo de entrada.
Los atributos min y max funcionan con los siguientes tipos de entrada: number, range, date, datetime-local, month, hour y week.
Sugerencia: use los atributos max y min juntos para crear un rango de valores legales.
Ejm
<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
El atributo multiple
El atributo de entrada multiple especifica que el usuario puede ingresar más de un valor en un campo de entrada. El atributo múltiple funciona con los siguientes tipos de entrada: email y file.
Ejm
<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>
El atributo pattern
El atributo pattern de entrada especifica una expresión regular con la que se comprueba el valor del campo de entrada cuando se envía el formulario.
El atributo pattern funciona con los siguientes tipos de entrada: text, date, search, URL, tel, email y password.
Ejm
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>El atributo placeholder
El atributo placeholder especifica una sugerencia breve que describe el valor esperado de un campo de entrada (un valor de muestra o una descripción breve del formato esperado).
La sugerencia breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.
El atributo placeholder funciona con los siguientes tipos de entrada: text, search, url, tel, email y password.
Ejm
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>El atributo required
El atributo de entrada required especifica que se debe completar un campo de entrada antes de enviar el formulario.
El atributo required funciona con los siguientes tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, y file.
Ejm
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>
El atributo step
El atributo step especifica los intervalos de números legales para un campo de entrada.
Ejemplo: si step= «3», los números legales podrían ser -3, 0, 3, 6, etc.
Sugerencia: este atributo se puede usar junto con los atributos max y min para crear un rango de valores legales.
El atributo step funciona con los siguientes tipos de entrada: number, range, date, datetime-local, month, time y week.
Ejm
<form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form>
El atributo autofocus
El atributo autofocus especifica que un campo de entrada debe enfocarse automáticamente cuando se carga la página.
Ejm
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
Los atributos height y width
Los atributos height y width especifican la altura y la anchura de un elemento <input type=»image»>.
Sugerencia: especifique siempre los atributos height y width de las imágenes. Si se establecen alto y ancho, el espacio requerido para la imagen se reserva cuando se carga la página. Sin estos atributos, el navegador no conoce el tamaño de la imagen y no puede reservarle el espacio adecuado. El efecto será que el diseño de la página cambiará durante la carga (mientras se cargan las imágenes).
Ejm
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
El atributo list
El atributo list hace referencia a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.
Ejm
<form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
El atributo autocomplete
El atributo autocomplete especifica si un formulario o un campo de entrada debe tener la función de autocompletar activada o desactivada.
autocomplete 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ón de los valores escritos anteriormente.
El atributo autocomplete funciona con <form> y los siguientes tipos de <input>: text, search, url, tel, email, password, datepickers, range, y color.
Ejm
<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form>