Formulario con form validation de HTML5

Estoy desarrollando un sistema web que almacenará todos los libros que compré para que pueda consultar y comprobar si ya tengo un libro o no. Sin embargo, necesito crear un formulario de registro en HTML para enviar estos libros al servidor. Para hacer un formulario necesitamos usar la tag form:

<form></form>

Ya hemos indicado que estamos creando un formulario, ¡ahora agregaremos los campos necesarios para registrar un libro! Necesito el nombre del libro, nombre del autor, fecha de compra, valor e ISBN. Pero, ¿cómo agregamos estos campos en HTML? Para agregar campos de texto, podemos usar la tag input:

<form> <input/> </form>

Comprobando nuestro primer resultado:

Genial, ¡creamos el primer campo! Pero hay algo muy raro en este campo ... ¿a qué se refiere este campo? ¿Qué información guardará? ¿Es el nombre del libro? ¿Nombre del autor? ¡No hay como saber qué tipo de información necesitamos enviar! Para indicar a qué se refiere el campo, usamos la tag label:

<form> <label>Livro</label> <input/> </form>

Vea nuestro primer campo:

Libro

¡Está mejorando! ¡Así que ahora vamos a agregar los otros campos también!

<form>     
    <label>Livro</label>     
    <input/>     
    <label>Autor</label>     
    <input/>     
    <label>Valor</label>     
    <input/>     
    <label>Data da compra</label>    
    <input/>
</form>

Ahora podemos completar nuestro formulario:

Libro Autor ISBN Valor Fecha de compra

¡Excelente! Tenemos todos los campos que necesitamos, pero todavía falta algo: necesito enviar estos datos al servidor. Pero, ¿cuándo lo enviaré al servidor? ¿Qué tal si usamos un elemento que cuando hacemos clic en él se envían los datos? ¡Un botón sería apropiado para esto! Luego usaremos la tag button:

<form>     
    <label>Livro</label>     
    <input/>         
        <label>Autor</label>     
    <input/>         
        <label>Valor</label>     
    <input/>         
        <label>Data da compra</label>    
    <input/>         
        <button>Cadastrar</button> 
</form>

Ahora incluso podemos hacer clic en el botón de formulario:

Libro Autor ISBN Valor Fecha de compra

Registrar

¡Maravilloso! Creamos nuestro formulario, completémoslo y verifiquemos si funciona como se esperaba:

Libro Autor ISBN Valor Fecha de compra

Registrar

¡Espera! En el sistema que estoy desarrollando, el valor debe ser solo un número y la fecha debe usar el formato día / mes / año ... pero ¿cómo podemos hacer que el campo nos informe que debe completarse de esta manera? Desde HTML5 las tags input se puede validar a través de una función que se llama form validation. Cada inputya permite la validación de datos por estándar y, en nuestro caso, validaremos los campos de Valor y Fecha de compra. Agregaremos estos validadores a nuestros inputs agregando el parámetro type:

<label>Livro</label> 
<input type="text" value="HTML5 e CSS3"/> 
<label>Autor</label> 
<input type="text" value="Lucas Mazza"/>
<label>ISBN</label> 
<input type="text" value="978-85-66250-05-3"/>
<label>Valor</label> 
<input type="number" /> 
<label>Data da compra</label>
<input type="date" />

Prueba los campos de Valor y Fecha de compra y mira el resultado:

Libro Autor ISBN Valor Fecha de compra

Registrar

Además de validar nuestros datos, el form validation proporciona otra gran ventaja para los usuarios de teléfonos inteligentes: cuando accede, por ejemplo, al campo Valor, en lugar de abrir un teclado de texto ordinario, abrirá un teclado numérico que facilitará la vida del usuario al escribir un valor.

Finalmente, agreguemos un contenedor a nuestro formulario usando la tag fieldset y usaremos la tag legend del fieldset para describir a qué se refiere el formulario:

<fieldset>     
    <legend>Formulário de cadastro de livros</legend>        
        <form>             
        <label>Livro</label>             
        <input type="text" value="HTML5 e CSS3"/>            
        <label>Autor</label>             
        <input type="text" value="Lucas Mazza"/>            
        <label>ISBN</label>             
        <input type="text" value="978-85-66250-05-3"/>             
        <label>Valor</label> <input type="number" />             
        <label>Data da compra</label>             
        <input type="date" />             
        <button>Cadastrar</button>         
    </form>
</fieldset>

Ve el resultado final de nuestro formulario:

Formulario de registro de libros

Libro Autor ISBN Valor Fecha de compra

Registrar

Vimos que para crear un formulario HTML necesitamos usar la tag form que indica la creación de un formulario. También vimos que podemos usar la tag input para indicar los campos que queremos en nuestro formulario. Además, también vimos que podemos utilizar algunos validadores en nuestros input desde HTML5, como la validación de fechas y números. Finalmente, vimos cómo podemos agregar un container en nuestro formulario para describir su objetivo usando la tag fieldset.

Entonces, ¿te gustó el formato? ¿Quiere obtener más información sobre HTML y las novedades de HTML5? En Alura, tenemos un curso para los que recién están empezando ahora con HTML y Front End y otros cursos que cubren muchos temas sobre HTML, CSS y Javascript, lo que le permite aprender y dominar el Front End de una vez.

Puedes leer también:

• Llenando un formulario HTML automáticamente con AJAX
• Vinculando elementos con HTML5
• Empezando con el desarrollo web Front-end