Mapa mental sobre los elementos que conforman HTML5 para formar la estructura general de documentos

Mapa mental sobre los elementos que conforman HTML5 para formar la estructura general de documentos.[pic 1]

Reporte para la creación de formularios en HTML y HTML5.

La creación de formularios en HTML conlleva el uso de la etiqueta <form> </form>obligatoriamente. Esta etiqueta marca el inicio y el fin del formulario que el usuario contestará, además del método y el lugar de envío de la información.

La etiqueta deberá contener, al menos, la siguiente sintaxis para el uso correcto:

<form action =” rutadeejemplo.php” method=” metodo”> … </form>

Donde la ruta de ejemplo será la dirección donde se enviará la información, como a un archivo php que contenga código para introducirlo en una base de datos. El método solo podrá ser post o get. Si se opta por el primero, los datos son incluidos con el cuerpo del formulario, en cambio, si se opta por el segundo, los datos aparecerán en la URL separados por un “?”. Dependiendo del uso del formulario, conviene más uno u otro; por ejemplo, para datos de un usuario nuevo que se registra, conviene usar el primer método para proteger los datos, mientras que, para la búsqueda de un video en YouTube, conviene usar el segundo, pues así se podrá compartir la URL y encontrar el mismo video.

La forma en que un formulario es estructurado puede, y se recomienda ampliamente, la siguiente: una etiqueta <label></label> que contendrá el texto referencia para lo que introducirá el usuario. Luego una etiqueta <input> que será con lo que el usuario interactúe. La etiqueta <input> es muy versátil, puede ser interpretada como un campo de texto, de contraseña, un cuadro de selección, un botón de selección e, incluso, el botón de enviar la información, tan solo con cambiar el atributo type de la etiqueta.

Estas son las etiquetas <input> más comunes:

• Para campo de texto: <input type=”text”>
• Para contraseñas: <input type=”password”>
• Para correo electrónico: <input type=”e-mail”>
• Para “checkbox”: <input type=”checkbox” name=”as”> Recuerda que el name será el valor que tendrá el checkbox si está marcado.
• Para “radio buttons” o selectores de una sola casilla: <input type=”radio” name=”as” value=”1”> Recuerda que el nombre para todas las opciones del radio button debe ser el mismo, lo que cambia es el valor.
• Para botón de envío de formulario: <input type=”submit”> o puede ser cambiado por <button type=”submit”>

Esta etiqueta también tiene otros atributos importantes. Debemos incluir el atributo name=”” para que cada dato ingresado se diferencie del resto. El atributo size=”” cambiará el tamaño del elemento, sobre todo si se trata de un type=”text”. El atributo required=”” tendrá como valor required cuando sea obligatorio introducir datos en ese elemento, como la contraseña, por ejemplo. Por último, placeholder=”” se usará en los input que sean campos de texto para dar una sugerencia o ejemplo de cómo se debe contestar en esa parte del formulario.

Además de la etiqueta <input>, también es usada <textarea> para comentarios o texto más grande, donde los atributos rows=”” y cols=”” modificarán el número de líneas y el de columnas, respectivamente, del campo de texto. Y la etiqueta <select></select>, que ofrece una amplia selección de diversas opciones ordenadas cómodamente en un recuadro. Se complementa con la etiqueta <option value=””>Texto de ejemplo</option> para añadir las opciones, donde value no se deberá repetir y deberán ser números y el texto de ejemplo será el texto que aparecerá como opción.

...