Ejercicio form/inputs

Crear un formulario que nos pida los siguientes datos:

Nombre
Edad
Email
Tipo de problema (urgente, muy urgente, para ayer)
Fecha
Es cliente o no
Es Premium o no
Observaciones

Elegid los tipos de objeto que creáis conveniente para cada dato.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
	<div class="container">
		<h2>Formulario reclamaciones</h2>
		<form>
			<div class="form-group">
				<label for="nombre">Nombre:</label>
				<input required type="text" class="form-control" placeholder="Introduzca el nombre" name="nombre"
					id="nombre">
			</div>
			<div class="form-group">
				<label for="edad">Edad:</label>
				<input type="number" class="form-control" placeholder="Introduzca edad" id="edad" name="edad">
			</div>
			<div class="form-group">
				<label for="email">Email:</label>
				<input required type="email" class="form-control" placeholder="Introduzca email" id="email"
					name="email">
			</div>
			<div class="form-group">
				<label for="tipo">Tipo de problema:</label>
				<select class="form-control" id="tipo" name="tipo">
					<option value="1">Urgente</option>
					<option value="2">Muy urgente</option>
					<option value="3">Para ayer</option>
				</select>
			</div>
			<div class="form-group">
				<label for="fecha">Fecha:</label>
				<input type="date" class="form-control" placeholder="Introduzca fecha" id="fecha" name="fecha">
			</div>
			<div class="form-check form-group">
				<label class="form-check-label">
					<input type="checkbox" id="cliente" name="cliente" class="form-check-input" value="cliente">¿Es
					cliente?
				</label>
			</div>
			<div class="form-check form-group">
				<label class="form-check-label">
					<input type="checkbox" id="premium" name="premium" class="form-check-input" value="cliente">¿Es
					premium?
				</label>
			</div>
			<div class="form-group">
				<label for="comentarios">Comentarios:</label>
				<textarea class="form-control" rows="5" id="comentarios" name="comentarios"></textarea>
			</div>
			<button type="submit" class="btn btn-primary">Enviar</button>
		</form>
	</div>
</body>

</html>

document.getElementById("cliente").checked

document.getElementById("fecha").value

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos