input type="text"

La etiqueta < input>, esta vez tiene como valor "text" en su atributo type, input type="text", esto simboliza a un campo de caja de texto lo cual permite a los usuarios finales editar texto en una sola línea. Los cajas de textos gran utilidad para recolectar textos cortos cómo frases, descripciones cortas, nombre, apellido, entre otros.

Ejemplos

En este primer ejemplo crearemos un formulario <form>, para recolectar información para ello Contamos con tres controles de entrada de texto:

• En primer lugar tenemos un campo de texto (input type="text"), en el cual podremos ingresar textos cortos.
• Luego tenemos un campo de email (input type="email"), este campo nos permitirá ingresar todos los correos de email.
• Por último tenemos un campo de submit (input type="submit"), esto recoger la información del formulario y entregará al agente procesador (servidor), mas conocido como botón de envío.

Además tenemos el atributo placeholder, el cual pertenece a html5, este atributo dará pista al usuario final, mostrando texto en el campo, una vez que el usuario empieza a escribir automáticamente el texto desaparecerá o se removerá.

<form>
        <fieldset>
            <legend>TEXTO</legend>
            <input type="text" placeholder="nombre" name="nombre" required>
            <input type="email" placeholder="escribe tu correo" required>
            <input type="submit">
        </fieldset>
    </form>

En este presente ejemplo, nos adentraremos sobre él input type="text", para ello usaremos algunos atributos más:

• Tenemos el atributo size esto nos permite poner el ancho del control como un número de caracteres visibles.
• El atributo maxlength nos permitirá establecer el número máximo de caracteres que este valor puede tomar.

<form>
        <fieldset>
            <legend>TEXTO</legend>
            <input type="text" placeholder="nombre" size="4" maxlength="4" name="nombre" required>
            <input type="submit">
        </fieldset>
  </form>

Adentrándonos más sobre input type="text" tenemos los siguientes atributos con algunas diferencias de los anteriores ejemplos:

• Tenemos el atributo readonyl, esto permite que el usuario final no pueda hacer ediciones como también borrarla, sólo le permite que seleccione y copiar el texto.
• El siguiente atributo es él disabled, mientras que este atributo no permite seleccionar y pegar el texto al usuario final y además el valor de este elemento no podrá ser enviada cuando el formulario es despachado.

<form>
     <fieldset>
         <legend>TEXTO</legend>
         <label>texto de lectura</label>
         <input type="text" value="codigos informaticos" readonly>
         <label>texto deshabilitada</label>
         <input type="text" value="codigo" disabled>
         <input type="submit">
     </fieldset>
 </form>

Por último haremos el uso del atributo list. Este atributo se encarga de enlazar un control etiqueta de html <datalist> a través de referencia id del atributo.
La etiqueta <datalist> nos permite poner un número de sugerencias que los usuario puede elegir automáticamente el valor.

<form>
       <fieldset>
           <legend>TEXTO</legend>
           <input type="text" list="listadenombre">
           <input type="submit">
       </fieldset>
   </form>
   <datalist id="listadenombre">
       <option value="carlos"></option>
       <option value="emerson"></option>
       <option value="juan"></option>
       <option value="mario"></option>
   </datalist>

Share on Facebook

Tweet

Follow us

Save