EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Etiquetas html de contenido y texto
            Etiquetas html de contenido y texto
            03/09/2019
            tablas de contenido en html
            Etiquetas html para crear tablas de contenido
            04/09/2019

            Etiquetas para la creación de formularios HTML

            Etiquetas para la creación de formularios

            Etiquetas para la creación de formularios

            Tabla de contenidos

            • 4. Formularios
            • 4.1. Etiquetas para la creación de formularios
            • 4.2. Tipos de inputs
            • 4.3. Atributos para la validación de campos en los formularios

            4. Formularios

            Los formularios son los elementos en los que se integran los botones y las áreas de texto que se utilizan para que los usuarios introduzcan sus datos o que puedan elegir entre varias opciones. Veamos las etiquetas que se utilizan para la creación de formularios en HTML5.

            4.1. Etiquetas para la creación de formularios

            El principio y final de un formulario se define con las etiquetas <form> y </form>. Dentro de las etiquetas de apertura y cierre de form se pueden incluir diferentes elementos que son enviados para ser procesados por el servidor web. HTML5 dispone de un gran número de elementos de formulario como puedes ver en la siguiente tabla.

            Tabla 4.1: Etiquetas para la creación de formularios
            Elemento Descripción
            <form> Define un formulario.
            <fieldset> Permite organizar en grupos los campos de un formulario.
            <legend> Representa el título de un <fieldset>.
            <label> Representa el título de un elemento de control de un formulario.
            <input> Se usa para crear controles interactivos que reciben datos del usuario. Ver atributos
            <button> Representa un botón.
            <option> Representa una opción en un elemento <select> o <datalist>.
            <select> Representa un elemento de control que permite la selección entre un conjunto de opciones <option>.
            <optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
            <datalist> Representa un elemento de control que permite la selección entre un conjunto de opciones <option>.
            <textarea> Representa un elemento de control de edición de texto multilínea.
            <output> Representa el resultado de un cálculo.

            Ver atributos para formularios


            Ejemplo

            <form>
                <!--Etiqueta fieldset-->
                <fieldset>
                    <!--Etiqueta legend-->
                    <legend>Datos personales</legend>
                    <!--Etiqueta label-->
                    <label>Nombre y apellidos: </label>
                    <!--Etiqueta input tipo texto-->
                    <input name='nombre' type='text'/><br>
                    <label>Sexo: </label>
                    <!--Etiqueta select-->
                    <select name="select">
                        <!--Etiqueta option-->
                        <option value="value1">Hombre</option> 
                        <option value="value2" selected>Mujer</option>
                    </select><br><br>
                    <label>Edad: </label>
                    <!--Etiqueta input tipo checkbox-->
                    <input type='checkbox' name='edad' value='20-39' /> 20-39
                    <input type='checkbox' name='edad' value='40-59' /> 40-59
                    <input type='checkbox' name='edad' value='60-79' /> 60-79<br><br>
                    <label>Email: </label>
                    <!--Etiqueta input tipo email-->
                    <input name='nombre' type='email'/><br><br>
                    <label>Estudios: </label>
                    <!--Etiqueta select-->
                    <select id="dino-select">
                    <!--Etiqueta optgroup-->
                    <optgroup label="Estudios Universitarios">
                        <!--Etiqueta option-->
                        <option>Doctorado</option>
                        <option>Máster</option>
                        <option>Grado</option>
                    </optgroup>
                    <optgroup label="Ciclo Formativo">
                        <option>Grado Superior</option>
                        <option>Grado Medio</option>
                    </optgroup>
                    </select><br><br>
                    <label>Elige tu navegador favorito: </label>
                    <input list="browsers" name="myBrowser" />
                    <!--Etiqueta datalist-->
                    <datalist id="browsers">
                        <option value="Chrome">
                        <option value="Firefox">
                        <option value="Internet Explorer">
                        <option value="Opera">
                        <option value="Safari">
                        <option value="Microsoft Edge">
                    </datalist><br><br>
                    <!--Etiqueta textarea-->
                    <textarea name="textarea" rows="10" cols="50">Escribe aquí tu mensaje</textarea>
                </fieldset>  
                <input type="submit" value="Enviar" />
            </form><br><br>
            
            <!--Nuevo formulario con output-->
            <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
                    <input type="range" name="b" value="50" /> +
                    <input type="number" name="a" value="10" /> =
                    <output name="result">60</output>
            </form>

            0

            4.2. Tipos de inputs

            Algunos de los inputs o controles más utilizados son los siguientes: button, checkbox, color, date, email, file, image, month, number, password, radio, range, search, submit, tel, text, time, url y week. Veamos un ejemplo con todos los tipos de inputs:


            Ejemplo

             <form>
              <label for="check">Acepto condiciones</label>
              <input type="checkbox" id="check"><br>
              <label for="color">Elige un color:</label>
              <input type="color" id="color"><br>
              <label for="fecha">Elige una fecha:</label>
              <input type="date" id="fecha"><br>
              <label for="correo">Indica tu correo:</label>
              <input type="email" id="correo"><br>
              <label for="archivo">Selecciona un archivo:</label>
              <input type="file" id="archivo">   <br>
              <label for="archivo">Pincha en la imagen:</label>                                                         
              <input type="image"  src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg" alt="Submit" width="38" height="38"><br>
              <label for="mes">Indica el mes:</label>
              <input type="month" id="mes"><br>
              <label for="numero">Selecciona un número:</label>
              <input type="number" id="numero"><br>
              <label for="contrasenya">Indica tu contraseña:</label>
              <input type="password" id="contrasenya"><br>
              <label for="radio">Esto es un radio button:</label>
              <input type="radio" id="radio"><br>
              <label for="rango">Selecciona un número del rango:</label>
              <input type="range" id="rango" min="0" max="100"><br>
              <label for="buscar">Campo de búsqueda:</label>
              <input type="search" id="buscar"><input type="submit" value="Enviar"><br>
              <label for="telefono">Indica tu teléfono:</label>
              <input type="tel" id="telefono"><br>
              <label for="nombre">Indica tu nombre:</label>
              <input type="text" id="nombre"><br>
              <label for="hora">Indica la hora:</label>
              <input type="time" id="hora"><br>
              <label for="url">Indica una URL:</label>
              <input type="url" id="url"><br>
              <label for="semana">Indica la semana:</label>
              <input type="week"><br>
              <input type="button" value="Enviar">
             </form>

            0

            4.3. Atributos para la validación de campos en los formularios

            La validación de los datos introducidos por los usuarios en los campos de los formularios es esencial para ofrecer al usuario información sobre los datos que se están solicitando. 

            Gracias a los nuevos atributos que se introdujeron en HTML5 no es necesario utilizar JavaScript obligatoriamente para la validación de los campos ya que se validan de forma automática al pulsar en el botón de tipo submit. En la siguiente tabla se destacan los atributos más utilizados.

            AtributoEjemplo
            placeholderplaceholder=”Indica tu nombre”
            requiredrequired=”true” o required
            patternpattern=”[a-z]{1,5}”
            minmin=”1”
            maxmax=”100”
            stepstep=”2” (saltos en un rango de números: 0, 2, 4…)
            disableddisabled=”true” o disabled
            autofocusautofocus=”true” o autofocus
            autocompleteautocomplete=”true” o autocomplete
            Tabla 4.2: Atributos para la validación de campos en los formularios

            Atributo Pattern y expresiones regulares

            El atributo pattern nos permite definir nuestras propias reglas para validar el valor de entrada de los campos usando expresiones regulares o regexp (contracción de las palabras inglesas regular expression).

            Veamos un resumen de algunos de los caracteres que nos ayudan a construir expresiones regulares:

            Clases de caracteres
            .Cualquier carácter excepto salto de línea
            [abc]Cualquiera de los caracteres entre corchetes
            [^abc]Que NO sea cualquiera de los caracteres entre corchetes
            [a-g]Cualquier carácter entre a y g (en minúscula)
            (a|b)a o b
            Anclas
            ^abcComienzo de una línea
            abc$Final de una línea
            Caracteres específicos
            \w\ d \sPalabra, dígito, espacio en blanco
            \W \D \SQue NO sea palabra, dígito o espacio en blanco
            \t \n \rTabulador, salto de línea, retorno de carro
            Cuantificadores
            a* a+ a?0 o más veces, 1 o más veces, 0 o 1 vez
            a{5} a{2,}Solo 5, 2 o más
            a{1,3}Entre 1 y 3
            Tabla 4.3. Expresiones regulares regexp

            En la siguiente página web puedes ver una referencia de patrones y expresiones regulares. Además, permite la validación de expresiones regulares: regexr.com

            Por ejemplo, vamos a definir una regla usando el atributo pattern. En este caso, queremos que el nombre de usuario consista solo de letras minúsculas. Además, la longitud del nombre de usuario no debe ser mayor de 15 caracteres.

            En RegExp, esta regla puede ser expresada como pattern=»[a-z]{1,15}».


            Ejemplo

            En el ejemplo se muestra un formulario que solicita los siguientes datos:

            • Nombre de 40 caracteres como máximo y sólo permite letras y números.
            • Código postal que admite 5 números.
            • Edad (solo dos dígitos numéricos).

            Además, todos los campos son obligatorios y disponen de placeholder. Además, el foco se encuentra en el primer campo. 

            <h2>Formulario de Contacto</h2>
            <form>
            <input name="nombre" type="text" placeholder="Nombre" pattern="[a-zA-Z]{1,40}" required autofocus/>
            <input name="cp" type="text" placeholder="Código postal" pattern="[0-9]{5}" required />	
            <input name="edad" type="text" pattern="[0-9]{2}"  placeholder="Edad" required />
            <button id="enviar" name="enviar" type="submit">ENVIAR</button>
            </form>
            

            0

            Comprueba tu aprendizaje

            ¿Con qué etiqueta se recogen los datos del usuario en un formulario?

            ¡Bien! ¡Has fallado!

            ¿Con qué elemento podemos añadir el título de un fieldset?

            ¡Bien! ¡Has fallado!

            ¿Qué etiqueta utilizamos para que el usuario pueda introducir un texto multi-línea en un formulario?

            ¡Bien! ¡Has fallado!

            Es obligatorio incluir la etiqueta fieldset en un formulario:

            ¡Bien! ¡Has fallado!

            En un formulario es obligatorio incluir las etiquetas form.

            ¡Bien! ¡Has fallado!

            HTML. Formularios
            ¡Muy bien!
            Sigue repasando...
            Compartir

            UD2. HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Marcos o frames, una tecnología obsoleta
            • 12. Etiquetas HTML para acceso directo en Android e iPhone
            • 13. Metaetiquetas o metatags para redes sociales
            • 14. Cómo usar Github y SourceTree para publicar contenido
            • 15. Repositorio Git en Visual Studio Code
            • 16. Resumen HTML
            • 17. Referencias y recursos HTML

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results