martes, 15 de marzo de 2016

Html5 - 14. Formulario

En esta entrada pongo ejemplo de un formulario con las distintas etiquetas y atributos que nos podemos encontrar.
Para ver el ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Formulario</title>
</head>
<body>
<header>
<h1>Formulario</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<h1>Mi Formulario</h1>
<form>
<input type="text" placeholder="nombre"/>
<input type="number" value="5" min="1" max="10"/>
<input type="range" min="0" max="100"/>
<input type="color"/>
<input type="date"/>
<button type="submit">Guardar</button>
</article>
</form>

</section>

<aside>
<h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li>
<li><a href="twitter.html">Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href="contacto.html">Contacto</a>
</li>
<li><a href="mapaweb.html">Mapa Web</a></li>
</ul>
</footer>
</body>
</html>
Introduzco varias etiquetas en el formulario para que veais parte de la variedad de datos que admite, el atributo placeholder es muy utilizado como ayuda al usuario indicandole que tiene que introducir en dicho campo.
Hay tambien intervalos de minimo y maximo (como podeis ver), escribir este codigo e ir probando cambios, por ejemplo añadir saltos de linea con <br>, cambiar intervalos, etc.
Los formularios html con php o javascript son muy utiles para obtener datos y procesarlos adecuadamente.
Esperando sea util, gracias.

No hay comentarios:

Publicar un comentario