Aprende hacer formularios desde cero

¡Si te gusta aprender, o eres curioso, quedate para aprender en nuestro curso!

30
20

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>