Vamos a crear un formulario simple
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<form name="formulario1">
<input name="texto1" type="text">
<input name="boton1" type="button" value="Púlsame">
</form>
</body>
</html>
Vamos a añadir más tipos de objeto de formulario
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<form name="formulario1">
TEXTO
<input name="texto1" type="text"><br>
CASILLA DE VERIFICACIÓN
<input name="casilla1" type="checkbox"><br>
MENÚ DE SELECCIÓN
<select name="seleccion">
<option>1 hijo</option>
<option>2 hijo</option>
<option>3 hijo</option>
</select><br>
BOTONES DE OPCIÓN RADIAL (CREA AGRUPADOS POR SU NOMBRE)
<input name="radial1" type="radio"><input name="radial1" type="radio"><br>
<input name="radial2" type="radio"><input name="radial2" type="radio"><br>
CONTRASEÑA
<input name="clave1" type="password"><br>
ÁREA DEL TEXTO
<textarea name="textarea1">Texto por defecto</textarea><br>
OCULTO
<input name="oculto1" type="hidden"><br>
BOTÓN
<input name="boton1" type="button" value="Púlsame"><br>
BOTÓN DE ENVIAR FORMULARIO
<input name="boton1" type="submit" value="Finalizar"><br>
</form>
</body>
</html>
Añadimos más etiquetas (label) al formulario y nuevas opciones.
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<form name="formulario1">
TEXTO
<label>Pon tu nombre</label>
<input name="texto1" type="text" value="NombrePorDefecto">
<input name="texto2" type="text" placeholder="Aquí tu apellido"><br>
CASILLA DE VERIFICACIÓN
<input name="casilla1" type="checkbox" checked><label>Experto</label><br>
MENÚ DE SELECCIÓN
<select name="seleccion">
<option value="1">1 hijo</option>
<option value="2" selected>2 hijo</option>
<option value="3">3 hijo</option>
<option value="3">3 hijo</option>
</select><br>
BOTONES DE OPCIÓN RADIAL (CREA AGRUPADOS POR SU NOMBRE)
<input name="radial1" type="radio" value="eccasado"><label>Casado</label><input name="radial1" type="radio" value="ecsoltero"><label>Soltero</label><br>
ÁREA DE TEXTO
<label>Escribe tu comentario</label>
<textarea name="textarea1">Me interesa porque ....</textarea><br>
BOTÓN DE ENVIAR FORMULARIO
<input name="boton1" type="submit" value="Enviar"><br>
</form>
</body>
</html>
OPCIONES DE ENVIO DE FORMULARIO
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
HAY DOS MÉTODOS DE ENVÍO
- GET: Envía los datos del formulario en la dirección (por defecto), con una cadena url ?nombre1=valor1&nombre2=valor2&....
- POST: Envía los datos internamente, no visible
Aparte podemos indicar hacia donde va el formulario, con "action"
<form name="formulario1" method="get" action="https://www.google.com/search">
<label>Buscar</label>
<input type="text" name="q">
<input name="boton1" type="submit" value="Enviar"><br>
</form>
Podemos enviar un formulario por post a otro archivo abajo nuestra:
<form name="formulario2" method="post" action="curso4_resultado.html">
<label>Buscar</label>
<input type="text" name="info">
<input name="boton1" type="submit" value="Enviar"><br>
</form>
</body>
</html>
RESULTADO DEL FORMULARIO ANTERIOR
<html>
<body>
Gracias por enviarnos el formulario
</body>
</html>
Creamos el css para los elementos de formulario
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
<style>
label{ font-size: 16px; color: grey; text-transform: uppercase; font-family: 'Courier New', Courier, monospace; }
input[type="text"]{ font-size: 20px; color: rgb(42, 22, 81); }
Podemos customizar solo si usamos -webkit-appearance: none; appearance: none
input[type="checkbox"]{ -webkit-appearance: none; appearance: none; width: 40px; height:40px; background-color: #2196F3; border:1px solid rgb(120, 94, 94); }
input[type="checkbox"]:checked{ width: 40px; background-color: #f3212c; }
select{ background-color: #2196F3; color:white; border-radius: 5px; }
input[type="radio"]{ -webkit-appearance: none; appearance: none; border-radius: 30%; border:1px solid rgb(120, 94, 94); width: 40px; height:40px; }
input[type="radio"]:checked{ background-color: chocolate;}
textarea{ background-color: cornsilk; color:darkred; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
input[type="button"]{ margin:10px 0; border: none; background-color: darkslateblue; color: white; }
input[type="submit"]{ background-color: rgb(183, 209, 183); color: rgb(150, 61, 61); padding: 10px; border-radius: 10px; font-size: 50px; }
.boton2clase{ background-color: deeppink !important; color:deepskyblue !important; }
.labelcomentario{ border:1px dashed #333; padding: 5; }
</style>
</head>
<body>
<form name="formulario1">
TEXTO
<label>Pon tu nombre</label>
<input name="texto1" type="text" value="NombrePorDefecto">
<input name="texto2" type="text" placeholder="Aquí tu apellido"><br><br>
CASILLA DE VERIFICACIÓN
<label>Experto</label><br>
<input name="casilla1" type="checkbox" checked><br>
MENÚ DE SELECCIÓN
<select name="seleccion">
<option value="1">1 hijo</option>
<option value="2" selected>2 hijo</option>
<option value="3">3 hijo</option>
<option value="3">3 hijo</option>
</select><br>
BOTONES DE OPCIÓN RADIAL (CREA AGRUPADOS POR SU NOMBRE)
<input name="radial1" type="radio" value="eccasado"><label>Casado</label><input name="radial1" type="radio" value="ecsoltero"><label>Soltero</label><br><br>
ÁREA DE TEXTO
<label class="labelcomentario">Escribe tu comentario</label><br>
<textarea name="textarea1">Me interesa porque ....</textarea><br><br>
<input name="boton1" type="button" value="Botón 1">
<input name="boton2" type="button" class="boton2clase" value="Botón 2"><br>
BOTÓN DE ENVIAR FORMULARIO
<input name="botonenviar" type="submit" value="Enviar"><br>
</form>
</body>
</html>