m2-front-end-101/s5-s6-bootstrap/form/form.html

<!DOCTYPE html>
<html lang="es-cl">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Formulario Bootstrap</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<main>
			<div class="container my-4">
				<form action="./filled-form.html" class="row g-3" id="userForm">
					<div class="col-md-4">
						<label for="userName" class="form-label">Nombre</label>
						<input
							type="text"
							class="form-control"
							id="userName"
							placeholder="Armin"
                            required
						/>
					</div>

					<div class="col-md-4">
						<label for="userSurname" class="form-label">Apellido</label>
						<input
							type="text"
							class="form-control"
							id="userSurname"
							placeholder="Cano"
                            required
						/>
					</div>

					<div class="col-md-4">
						<label for="userNameOfUser" class="form-label"
							>Nombre de usuario</label
						>
						<div class="input-group mb-3">
							<span class="input-group-text">@</span>
							<input
								type="text"
								class="form-control"
								id="userNameOfUser"
								placeholder="armincano"
								aria-label="nombre de usuario"
                                required
							/>
						</div>
					</div>

					<div class="col-md-6">
						<label for="userCity" class="form-label">Ciudad</label>
						<input
							type="text"
							class="form-control"
							id="userCity"
							placeholder="Villarrica"
                            required
						/>
					</div>

					<div class="col-md-3">
						<label for="reasonSelect" class="form-label">Motivo</label>
						<select
							class="form-select"
							id="reasonSelect"
							aria-label="Default select example"
						>
							<option selected>Depósito</option>
							<option value="1">Giro</option>
							<option value="2">Consulta de Saldo</option>
						</select>
					</div>

					<div class="col-md-5">
						<label class="form-check-label" for="areAnswersShown">
							¿Desea ver la respuesta en pantalla?
						</label>
						<div class="form-check">
							<input
								class="form-check-input"
								type="checkbox"
								value="showAnswers"
								id="areAnswersShown"
								checked
							/>Si
						</div>
					</div>

					<div class="col-md-12">
						<button type="submit" class="btn btn-primary mb-3">
							Solicitar
						</button>
					</div>
				</form>
			</div>
		</main>

		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
	</body>
</html>