Creando campos para email, url, teléfono y búsquedas

Continuamos donde lo dejamos, recordad que en la clase anterior, empezamos a crear formularios. Aprendimos a crear cajas de password, botones radiales o de radio, checkbox o casillas de verificación y botones de envío y de reseteo.

Estuvimos trabajando con etiquetas <form>, <imput> y <label>, todas ellas necesarias para el correcto desarrollo de un formulario web. Bueno pues en esta clase vamos a aprender a crear campos para email, url, teléfono y búsquedas, lo cual nos permitirá crear formularios más completos

Estos campos se generan de igual forma, con la etiqueta <imput>. Esta etiqueta nos permite generar diversos tipos de controles. Como hemos estado viendo anteriormente solo cambiando el valor del atributo type="" se generan diferentes controles.

Creando un campo para Email

Como he comentado más arriba cambiando el valor del atributo type="" por "email", y ya está, hemos definido nuestro campo para que el usuario introduzca su dirección de correo electrónico. Un atributo que no quiero que se me pase por si queremos que el usuario ingrese obligatoriamente los datos de algún campo, debemos usar el atributo "required". Vemos un ejemplo a continuación.

<form action="nombre_del_archivo" method="post">
<p>
<label for="tuemail">Tu Email</label>
<input type="email" name="tuemail" id="tuemail" required>
</p>
</form>

Vista en Google Chrome

Creando un campo para url

Sencillo, vamos a crear un campo para que el usuario pueda ingresar su url. Para evitar confusiones en este campo, tenemos 2 atributos que nos van a resultar muy útiles, ya que nos permite poner un texto de ayuda. Uno sería value="", ahora el campo de email se encuentra con un texto de ejemplo para ayudar al usuario. El inconveniente es que el usuario tiene que borrarlo para introducir su url. El segundo atributo y mas recomendable, es placeholder="", que aparece en el campo de email como ejemplo y el usuario no necesita borrarlo. No se borrará hasta que empiece a introducir los datos.

<form action="nombre_del_archivo" method="post">
<p>
<label for="url">Ingrese su web:</label>
<input type="url" name="url" id="url" placeholder="Ejem:http:/www.tusitio.com">
</p>
</form>

Vista en Google Chrome

Creando un campo para teléfono

Para crear un campo donde se introduzca el numero de teléfono del usuario, daríamos el valor "tel" al atributo type="". Seguro que os habeis dado cuenta de como el teclado "QWERTY" de las tabletas y smartphone se adaptan en función al tipo de campo, todo gracias a HTML5

<form action="nombre_del_archivo" method="post">
<p>
<label for="telefono">Ingrese su teléfono<:</label>
<input type="tel" name="telefono" id="telefono">
</p>
</form>

Vista en Google Chrome

Campo de tipo buscar

No me voy a alargar inútilmente, es tan sencillo como agregarle el valor "search" al atributo type="".

<form action="nombre_del_archivo" method="post">
<p>
<label for="buscar">Buscar:</label>
<input type="search" name="buscar" id="buscar" placeholder="Buscar en la web">
</p>
</form>

Vista en Google Chrome

Conclusiones

Con los conocimientos de clases anteriores y la clase de hoy hemos aprendido a crear campos para email, url, teléfono y búsquedas. Pocas conclusiones vamos a sacar a parte de las mencionadas. Nos quedan todavia unas clases más sobre los formularios y los tipos de caja. En este tema tenemos que "escarbar" un poco más ya que nos va a venir muy bien a la hora de crear sitios web profesionales.

Os emplazo a la siguiente clase y si eres tan amable, me gustaría que compartieras esta publicación en tu red social favorita. De esta manera habrá más personas que se beneficien de estos conocimientos al igual que tu. Si te apetece regalanos un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018