Dia 19
This commit is contained in:
Marcos Lopez
parent
85e8122aa3
commit
9310ef6ca4
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Formularios 1</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<form method="get" action="../gracias.html">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Datos Personales</legend>
|
||||||
|
<label>Nombre
|
||||||
|
<input type="text" name="nombre" placeholder="Escribe tu nombre...">
|
||||||
|
</label> <br>
|
||||||
|
<label>Apellidos
|
||||||
|
<input type="text" name="apellidos" placeholder="Escribe tus apellidos...">
|
||||||
|
</label> <br>
|
||||||
|
<label>DNI
|
||||||
|
<input type="text" name="dni" placeholder="NIF">
|
||||||
|
</label> <br>
|
||||||
|
<br>
|
||||||
|
<label>Sexo</label>
|
||||||
|
<input type="radio" name="sexo" value="masculino">Masculino
|
||||||
|
<input type="radio" name="sexo" value="femenino">Femenino
|
||||||
|
<input type="radio" name="sexo" value="otro">Otros
|
||||||
|
<input type="radio" name="sexo" value="nc" checked>Prefiero no contestar
|
||||||
|
<br>
|
||||||
|
<label> Estoy de acuerdo con los terminos y condiciones
|
||||||
|
<input type="checkbox" name="condiciones">
|
||||||
|
</label> <br>
|
||||||
|
<input type="submit" name="enviar" value="Enviar" />
|
||||||
|
<input type="reset" name="limpiar" value="Limpiar formulario" />
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Formularios 2</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Formulario de registro</h1>
|
||||||
|
<form method="get" action="../gracias.html">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>Nombre
|
||||||
|
<input type="text" name="nombre" placeholder="Escribe tu nombre...">
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>Apellidos
|
||||||
|
<input type="text" name="apellidos" placeholder="Escribe tus apellidos...">
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>Sexo</label>
|
||||||
|
<input type="radio" name="sexo" value="h">Hombre
|
||||||
|
<input type="radio" name="sexo" value="m">Mujer
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>Correo
|
||||||
|
<input type="email" name="email" placeholder="email...">
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="poblacion">Poblacion</label>
|
||||||
|
<select name="poblacion" required>
|
||||||
|
<option disabled selected>-- Selecciona --</optiondisabl>
|
||||||
|
<option value="a coruña">A Coruña</option>
|
||||||
|
<option value="lugo">Lugo</optionselected>
|
||||||
|
<option value="orense">Ourense</option>
|
||||||
|
<option value="pontevedra">Pontevedra</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label> Descripcion
|
||||||
|
<textarea name="condiciones" cols="40" rows="6"></textarea>
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="publicidad">Deseo recibir informacion sobre novedades y ofertas
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="condiciones" required>Declaro haber leido y aceptar las condiciones
|
||||||
|
generales del
|
||||||
|
programa...
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<input type="submit" name="enviar" value="Enviar" />
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: #718751;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
form{
|
||||||
|
margin: auto;
|
||||||
|
border: 3px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #718751;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding:1em;
|
||||||
|
max-width: 350px;
|
||||||
|
min-width: 250px;
|
||||||
|
background-color: #E2001A;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 3px;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #718751;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend{
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #718751;;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text], input[type=tel]{
|
||||||
|
background-color:#718751;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
label{
|
||||||
|
width: 5em;
|
||||||
|
}
|
||||||
|
.input_flex{
|
||||||
|
display: flex;
|
||||||
|
flex-direction:row;
|
||||||
|
gap: 0.5em;
|
||||||
|
padding: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
padding: 0.2em;
|
||||||
|
background-color: #E2001A;
|
||||||
|
border: 2px solid #718751;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
.input_flex{
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap: 0.5em;
|
||||||
|
padding: 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<title>Practica 3</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Pedido de pizza</h2>
|
||||||
|
|
||||||
|
<form action="../gracias.html">
|
||||||
|
<fieldset>
|
||||||
|
<legend>La pizza</legend>
|
||||||
|
<p>
|
||||||
|
<p>Ingresdientes</p>
|
||||||
|
<input type="checkbox" name="queso"> Queso <input type="checkbox" name="pimiento"> Pimiento <br>
|
||||||
|
<input type="checkbox" name="cebolla"> Cebolla <input type="checkbox" name="atun"> Atún <br>
|
||||||
|
<input type="checkbox" name="tomate"> Toamte <input type="checkbox" name="jamon"> Jamon
|
||||||
|
</p>
|
||||||
|
<label for="tamano">Tamaño</label><br>
|
||||||
|
<input type="radio" name="tamano" value="pequena" checked> Pequeña <br>
|
||||||
|
<input type="radio" name="tamano" value="mediana"> Mediana <br>
|
||||||
|
<input type="radio" name="tamano" value="grande"> Grande <br>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Datos de entrega</legend>
|
||||||
|
|
||||||
|
<p class="input_flex">
|
||||||
|
<label for="name">Nombre </label>
|
||||||
|
<input type="text" name="nombre" placeholder="Escribe tu nombre...">
|
||||||
|
</p>
|
||||||
|
<p class="input_flex">
|
||||||
|
<label for="direccion">Direccion</label>
|
||||||
|
<input type="text" name="direccion" placeholder="Escribe tu direccion...">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p class="input_flex">
|
||||||
|
<label for="telefono">Telefono</label>
|
||||||
|
<input type="tel" name="telefono" placeholder="982210251">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="instrucciones">Instrucciones especiales</label> <br>
|
||||||
|
<textarea name="instrucciones" rows="10" cols="24"></textarea>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Metodo de pago</legend>
|
||||||
|
<select name="pago">
|
||||||
|
<option value="efectivo" selected>Efectivo</option>
|
||||||
|
<option value="tarjeta">Tarjeta</option>
|
||||||
|
<option value="bizum">Bizum</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
<input type="submit" class="btn" value="ok">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
|
@ -1,39 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Formularios 1</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<form action="">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Datos Personales</legend>
|
|
||||||
<label>Nombre
|
|
||||||
<input type="text" placeholder="Escribe tu nombre...">
|
|
||||||
</label> <br>
|
|
||||||
<label>Apellidos
|
|
||||||
<input type="text" placeholder="Escribe tus apellidos...">
|
|
||||||
</label> <br>
|
|
||||||
<label>DNI
|
|
||||||
<input type="text" placeholder="NIF">
|
|
||||||
</label> <br>
|
|
||||||
<br>
|
|
||||||
<input type="radio" name="radio1"><label for="radio1">Masculino</label>
|
|
||||||
<input type="radio" name="radio2"><label for="radio2">Femenino</label>
|
|
||||||
<input type="radio" name="radio3"><label for="radio3">Otros</label>
|
|
||||||
<input type="radio" name="radio3"><label for="radio3">Prefiero no contestar</label>
|
|
||||||
<br>
|
|
||||||
<label> Estoy de acuerdo con los terminos y condiciones
|
|
||||||
<input type="checkbox">
|
|
||||||
</label> <br>
|
|
||||||
<input type="submit" name="enviar" value="Enviar POR CORREO" />
|
|
||||||
<input type="reset" name="limpiar" value="Limpiar el
|
|
||||||
formulario" />
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user