Formulario HTML, atributos y nuevos controles HTML5

He creado este ejercicio, que consta de un formulario HTML. Va acompañado de una serie de intrucciones para practicar casi todos los tipos de elementos, atributos que empiezan a usarse en HTML5.

También os dejo el código de la solución del ejercicio.

Descargar (PDF, 104KB)

<!DOCTYPE html>
<html>
	<head>
			<title>Formulario completo</title>
	</head>
	
<body>

		<h1>Jobs center</h1>

		<form>
		
				<fieldset>
					<legend>Datos de acceso</legend>
							<div>		
									<label for='name'>Nombre: </label><input id='name' type="text"   />
							</div>
							
							<div>
									<label for='password'>Contraseña: </label><input id='password' type="password"  />
							</div>
				</fieldset>
		
				<fieldset>
					<legend>Datos personales</legend>
								<div>
										<label for='email'>Correo electrónico: </label><input id='email' type="email"  required />
								</div>
								
								<div>
										<label for='telefono'>Teléfono: </label><input id="telefono" type="text"  placeholder="123456789"  pattern="[0-9]{9}"  required />
								</div>
								
								<!-- valida que sea una URL correcta-->
								<div>
								 		<label for="homepage">Tú página web:</label><input type="url" id="homepage">
								</div>
								
								<div>
										<!-- no soportado en Safari -->
										<label for="fecha">Fecha de nacimiento</label><input id='fecha' type="date"  required />
								</div>
								
								<div>
									<span>Género</span>
										<div><input type="radio" id="hombre" name="genero"><label for="hombre">Hombre</label></div>
										<div><input type="radio" id="mujer" name="genero"><label for="mujer">Mujer</label></div>
										<div><input type="radio" id="otros" name="genero"><label for="otros">Otros</label></div>
								</div>
				</fieldset>	
			
				<fieldset>
					<legend>Habilidades</legend>
						<div>
								<label for="ingles">Inglés (min 1, max 5): </label><input id="ingles" type="number"  min="1" max="5"  />
						</div>
						
						<div>
								<label for="euskera">Euskera (min 1, max 5): </label><input id="euskera" type="number"  min="1" max="5"  />
						</div>

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *