Publicado el Deja un comentario

08 Html Css. Tablas y formularios

Vemos en el video como insertar tablas y formularios en nuestra web.

<!DOCTYPE html><html><head><title>Tablas y Formularios</title><meta charset=”utf-8″></head><body><!–Cabecera–><header>
</header> <!–Barra navegacion–><nav>
</nav><!–Contenido principal–><section><article><!–Tabla–><table border=”1″><caption>Tabla</caption><tr><th>Nombre</th><th>Edad</th></tr><tr><td>Jose</td><td>46</td></tr><tr><td>Mar</td><td>44</td></tr></table><!–Formulario–><form action=”webRespuesta.php”><fieldset><legend>Formulario</legend><label for=”usuario”>Usuario</label><input type=”text” name=”usuario” autofocus placeholder=”Por tu nombre” required><br/><label for=”pass”>Password</label><input type=”password” name=”pass” required><br/><label for=”email”>Email</label><input type=”email” name=”email” required><br/><button type=”submit”>Enviar</button></fieldset><fieldset><legend>Otros, pruebas</legend><label for=”numero”>Numero</label><input type=”number” name=”numero” min=”1″ max=”80″ step=”3″><br/><br/><input type=”radio” name=”radiobutton” value=”Radio”><label>Radio</label><br/><input type=”checkbox” checked=”checked”><label>Check</label><br/><input type=”date”><br/><input type=”color”><br/></fieldset></form></article></section><!–Complemento lateral–><aside>
</aside><!–Pie de pagina–><footer>
</footer></body></html>

Please follow and like us:
Publicado el Deja un comentario

Html5 – 17. Formulario 2

Volvemos a retomar la etiqueta form de html, en este caso añadimos la etiqueta date, que proporciona un desplegable mostrando el calendario para elegir fecha, en principio le damos un valor que puede modificarse.

<!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>
<label>Nombre:</label>
<input type=”text” placeholder=”nombre” required/>
<label>Telefono:</label>
<input type=”number” placeholder=”954358864″/>
<label>Fecha Nacimiento:</label>
<input type=”date” value=”2016-07-12″/>
<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>

El atributo placeholder hace que aparezca un ejemplo del valor requerido (mas atenuado) para que sirva de guia al usuario de la web.
Tambien aparece la etiqueta label que genera el nombre que aparece como etiqueta del campo a insertar.
Espero sea util, gracias,

Please follow and like us: