Formularios



Métodos de envío, GET y POST
GET: Es el método que usamos para navegar. Datos visibles, limitada, favoritos. Ej. Formulario de búsqueda. <form method="get"> </form>
POST: Es más seguro. Datos no visibles, sin límite, ficheros. Ej. Formulario de registro.

Etiquetas para formularios

-form; -input; -selet; -textarea; -label; -fieldset.

<input.../> (input no tiene etiqueta de cierre)texto, casillas de verificación, casillas de opción (radio),l archivos, texto enmascarado (password), ocultos, botones.

Atributos de <input.../>

name: texto, nombre del campo para el envío. Ej. <input name="email"/>

type:

  • text: texto (maxlength: número de caracteres; size: tamaño de campo; value)
  • checkbox: casilla de verificación <input type="checkbox" name="temas"/> <input type="checkbox" value="html"/>
  • checked: <input type="checkbox" checked="checked"/>
  • radio: casilla de opcion (radio)
  • file: subir fichero. <input type="file" accept="image/gif"/>
  • password: texto enmascarado
  • hidden: campo oculto
  • button: botón
  • submit: botón de enviar
  • image: imagen como botón de enviar
  • reset: botón de limpiar
 El atributo checked se usa para indicar que el elemento está seleccionado

Para el envío de archivos es necesario que la etiqueta form sea así: 
<form enctype="multipart/form-data"> </form>

disabled: Deshabilita el campo para que no pueda ser utilizado

readonly:. Funciona similar a disabled, pero poniéndolo tipo texto podría seleccionar y copiar el texto.

Ejemplo:

 


<!DOCTYPE html>

<html>

<head>

 <title>Formulario de registro - Mi web</title>

 <meta charset="UTF-8">

</head>

<body>
<h1>Formulario de registro</h1>
<form action="index.html" method="get">
<p>
Nombre: <input type="text" name="nombre" maxlength="50"/> <br>
</p>

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50"/> <br>
</p>
<p>
Sexo: <input type="radio" name="sexo" value="femenino"/>Femenino <br>
</p>
<p>
<input type="radio" name="sexo" value="masculino"/>Masculino <br>
</p>
<p>
Correo electrónico<input type="text" name="correo" maxlength="100"/> <br>
</p>
<p>
<input type="checkbox" name="info" checked="checked" />Deseo recibir información sobre novedades y ofertas <br>
</p>
<p>

<input type="checkbox" name="condiciones"/>Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre
protecciónn de datos <br>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>

</form>
</body>

</html>
Quedaría así:










select
Permite listas desplegables y listas de selección múltiple

Atributos de select
name;  multiple="multiple"

Etiquetas
Para definir cada una de las opciones de la listas usamos la etiqueta option.Ejemplo:

<select>  (al añadir multiple, <select multiple="multiple"> podemos seleccionar varios archivos de la lista)
   <option value="HTML">
       HTML
   </option>
   <option value="CSS">
      CSS
      </option>
</select>


Para listas con muchos elementos usamos optgroup

<select>
   <optgroup label="HTML">
      <option value="tables">Tablas</option>
      <option value="forms">Formularios</option>
  </optgroup>
  <optgroup label="CSS">
...
</select>

Cajas de texto
<textarea cols="20" rows="2">
Cuando tengamos mucho texto, esta opción nos creará un scroll

Etiqueta label
 representa una etiqueta para un elemento en una interfaz de usuario.
Agrupa elementos de un formulario que están relacionados; dibuja un marco alrededor de los campos.<form>
   <label for="html">HTML</label>
   <input type="radio" name="tema" id="html" />
   <br />
  <label for="css">CSS</label>
  <input type="radio" name="tema" id="css" />
</form>

<legend> es un tipo de subtítulo para cada label. Ejemplo:

<fieldset><legend>Perfil</legend>
   Nombre: <input type="text"/><br />
   Email: <input type="text"/><br />
</fieldset>
<fieldset><legend>Temas</legend>
   <input type="checkbox"/>HTML
   <input type="checkbox"/>CSS
</fielset>

Nuevas funcionalidades para formularios con HTML5

INPUT TYPE "url" Ej: <input type="url" name="url">
INPUT TYPE "tel" Ej: <input type="tel" name="telf" pattern="##" /> pattern es un campo para validar como un formato numérico en particular.
INPUT TYPE "email" Ej: <input type="email" name="email" />
INPUT TYPE "number" Ej: <input type="number" name="cantidad"  min="1" max="5" value="2"/>
INPUT TYPE "color" Ej:  <input type="color" name="favcolor" value="#123456"/>
INPUT TYPE "search" Ej: <input type="search" name="buscador"/>
INPUT TYPE "range" Ej: <input type="range" name="puntos" min="1" max="10"/>

 INPUT TYPE "datetime" Ej: <input type="datetime" name="fechahora"/>
INPUT TYPE "datetime-local" Ej: <input type="datetime-local" name="fechahora-usuario"/> (este input no contiene la hora como del datetime, es su única diferencia).
INPUT TYPE "date" Ej: <input type="date" name="fecha"/>
INPUT TYPE "month" Ej: <input type="month" name="mes"/>
INPUT TYPE "week" Ej: <input type="week" name="semana"/>
INPUT TYPE "time" Ej: <input type="time" name="hora"/>

Atributo: "autocomplete" Ej: <form autocomplete="on"> ; <input type="email" name="email" autocomplete="off">
Atributo: "autofocus" (nos permite seleccionar en que campo debe de aparecer el focus de la página, como un navegador) Ej: <input type="text" name="nombre" autofocus />
Atributo: "min-max" Ej: <input type="number" name="cantidad" min="2"
max="14"> (entre 2 y 14)
Atributo:"step" (especifica los intervalos numéricos válidos para un control) Ej: <input type="number" name="puntos" min="2" max="14" step="2" value="2"/>
Atributo: "pattern"(especifica que caracteres se usan para el campo) Ej: <input type="text" name="prefijo_pais" pattern="[A-Za-z]{3}" title="código de 3 letras"/>
Atributo:"placeholder" (permite que se muestre una pista de lo que se debe rellenar en el campo) Ej: <input type="text" name="nombre" placeholder="katerin Rúa" />
Atributo:"required" (es un campo obligatorio) Ej: <input type="text"name="nombre" required />





 Código del formulario anterior:


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Formulario de registro</title>
 <link href="estilo-formulario.css" rel="stylesheet">
</head>
<body>

<style>



body {
 font-family: Arial, Helvetica, sans-serif;
 width: 90%;
 margin: 0 auto;}
 
h1, h2 {
 font-family: Georgia, serif;
 text-align: center;}
 
fieldset {
 margin: 1em auto; 
}
 
 
legend {
 font-weight: bold;
 text-transform: uppercase;
}


input:focus, select:focus {
  background-color: yellow;}

input:hover, select:hover {
  background-color: red;}
  
 #boton-crear {
  font-size: 2em;
  padding: 0.5em;
}

#ofertas p {
 float: left;
}

label {
 font-weight: bold;
 display: block;

}

.inline {
 display: inline;}
 
.centrado {
 text-align: center;
}

</style>

 <h1>iDESWEB</h1>
 <h2>Formulario de registro</h2>
 
 <form action="##" method="get">
  
 <fieldset><legend>QUIÉN ERES?</legend>
 
  <p><label for="nombre">Nombre</label></p>
  <p><input type="text" name="nombre" id="nombre" /></p>
  
  <p><label for="apellidos">Apellidos</label></p>
  <p><input type="text" name="apellidos" id="apellidos" /></p>
  
  <p><label for="correo">Correo electrónico</label></p>
  <p><input type="text" name="correo" id="correo" /></p>
  
  
  <p>
  <label for="dia">Fecha de nacimiento</label>
  <select name="dia" id="dia">
  <option>Día</option>
  </select>

  <select name="mes" id="mes">
  <option>Mes</option>
  </select>

  <select name="anyo" id="anyo">
  <option>Año</option>
  </select>
  </p>
 </fieldset>


 <fieldset><legend>DE DÓNDE ERES?</legend> 
 
  <p><label for="ciudad">Ciudad</label></p>
  <p><input type="text" name="ciudad" id="ciudad" /></p>
  
  <p><label for="codigo">Código postal</label></p>
  <p><input type="text" name="codigo" id="codigo" /></p>
  
  
  <p>
  <label for="pais">País</label>
  <select name="pais" id="pais">
  <option>País</option>
  </select>
  </p>
  
 </fieldset>
 
 
 <fieldset><legend>CÓMO QUIERES INICIAR SESIÓN?</legend>

  <p><label for="nombre">Nombre de usuario</label></p>
  <p><input type="text" name="nombre" id="nombre" /></p>
  
  <p><label for="contrasena">Contrasena</label></p>
  <p><input type="text" name="contrasena" id="contrasena" /></p>
  
  <p><label for="repetircontrasena">Repetir la contrasena</label></p>
  <p><input type="text" name="repetircontrasena" id="repetircontrasena" /></p>

 </fieldset>
 
 
 <fieldset><legend>CONDICIONES DE REGISTRO</legend> 
 
  
  <label>Deseo recibir ofertas de IDESWEB</label>
  <input type="radio" name="ofertas" id="ofertas1" value="1" /> <label for="ofertas1" class="inline">Una vez al día
  <input type="radio" name="ofertas" id="ofertas2" value="2" /> <label for="ofertas2" class="inline">Una vez a la semana
  <input type="radio" name="ofertas" id="ofertas3" value="3" /> <label for="ofertas3" class="inline">Una vez al mes
  
  
 <p><input type="checkbox">Acepto el acuerdo de servicios.
 </fieldset></p>
 
 <p class="centrado">
  <input type="submit" value="Crear cuenta" id="boton-crear" />
 </p>
  
 
 </form>
</body>


Código para el anterior formulario:

<!DOCTYPE html> 



<html>



<head>



<meta charset="utf-8" />



<title>Ejemplo de formulario maquetado</title> 



<link href="formulario-otro-estilo.css" rel="stylesheet" />



</head>



<div id="contenedor">



<body>



<style>







/* Características generales de la página */
body {
  font-size: 14px;
  font-family: Arial, sans-serif;
  background: #AAA;
}

/* El contenedor define la zona principal de contenido */
#contenedor {
  background: #FFF;
  margin: 1em auto;
  padding: 1em;
  width: 768px;
}

/* El formulario está definido como una lista */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  border-top: 1px solid #CCC;
  margin: 1em 0;
  padding: 1em;
  width: auto;
  overflow: hidden;
}

/* El formulario se organiza en dos columnas, el título y los controles */
ul li label.titulo {
  float: left;
  width: 150px;
  text-align: right;  
}
 
ul li div.controles {
  margin-left: 160px;
}

/* El último elemento del formulario es el botón "Registrarse" */
ul li.botones {
  border-top: 2px solid #CCC;
  clear: both;
  float: none;
  padding: 1em 0;
  text-align: right;
  width: 100%;
}
 
ul li.botones input {
  font-size: 18px;
}

/* El título de los elementos de la lista */ 
ul li label.titulo {
  font-weight: bold;
}
 
ul li div span {
  float: left;
  padding: 0.3em 0;
}
 
ul li div span.completo {
  width: 100%;
}
 
ul li div span.mitad {
  width: 50%;
}
 
ul li div span.tercio {
  width: 33%;
}
 
ul li div span.dostercios {
  width: 66%;
}

/* Como se define display: block, se muestra en la línea siguiente */
ul li div span label {
  display: block;
  font-size: 12px;
  color: #333;
}

/* Configuración de los controles del formulario */
ul li input {
  padding: 0.2em;
}
 
input#apellido1, input#apellido2, input#direccion, input#email {
  width: 260px;
}
 
input#codigopostal {
  width: 80px;
}
 
select#provincia {
  width: 90px;
}
 
select#pais {
  width: 150px;
}
 
input#telefonofijo, input#telefonomovil {
  width: 135px;
}
 
/* Cambia el color cuando se sitúa el cursor del ratón */
ul li:hover {
  background-color: #FF9;
}
 
ul li.botones:hover {
  background-color: transparent;
}

/* Destaca el control cuando recibe el foco */
ul li input, ul li select {
  border: 2px solid transparent;
  border-bottom: 2px solid black;
}

ul li.botones input {
  border: 2px solid #CCC;
}

ul li input:focus, ul li select:focus {
  border: 2px solid #F00;
}












</style>



<form method="post" action="#">



<h1>Formulario de registro</h1>

<ul>
<li>


  <div class="controles">



<label class="titulo" for="nombre">Nombre y apellidos</label>

<span class="completo">


    <span class="completo">



<input id="nombre" name="nombre" value="" />

<label for="nombre">Nombre</label>


    <span class="completo">

</span>
 


<input id="apellido1" name="apellido1" value="" />

      <label for="apellido1">Primer apellido</label>


  <label class="titulo" for="direccion">Dirección</label>

</span>
 


<input id="apellido2" name="apellido2" value="" />

      <label for="apellido2">Segundo apellido</label>


<div class="controles">

</span>
  </div>
</li>
 
<li>
 


    <span class="tercio">

    <span class="completo">
      <input id="direccion" name="direccion" value="" />
      <label for="direccion">Calle, número, piso, puerta</label>
    </span>
 


      <input id="municipio" name="municipio" value="" />

      <input id="codigopostal" name="codigopostal" value="" />
      <label for="codigopostal">Código postal</label>
    </span>
 
    <span class="dostercios">
      <label for="municipio">Municipio</label>
    </span>
 


        <option value="provincia3">Provincia 3</option>

    <span class="tercio">
      <select id="provincia" name="provincia">
        <option value=""></option>
        <option value="provincia1">Provincia 1</option>
        <option value="provincia2">Provincia 2</option>
      </select>


        <option value="pais2">País 2</option>

      <label for="provincia">Provincia</label>
    </span>
 
    <span class="dostercios">
      <select id="pais" name="pais">
        <option value=""></option>
        <option value="pais1">País 1</option>
        <option value="pais3">País 3</option>
      </select>


  <label class="titulo" for="telefonofijo">Teléfono</label>

      <label for="pais">País</label>
    </span>
  </div>
</li>
 
<li>
  <label class="titulo" for="email">Email</label>
 
  <div class="controles">
    <span class="completo">
      <input id="email" name="email" value="" />
    </span>
  </div>
</li>
 
<li>
 
  <div class="controles">


</li>

    <span class="mitad">
      <input id="telefonofijo" name="telefonofijo" value="" />
      <label for="telefonofijo">Fijo</label>
    </span>
 
    <span class="mitad">
      <input id="telefonomovil" name="telefonomovil" value="" />
      <label for="telefonomovil">Móvil</label>
    </span>
  </div>
 


</html>

<li class="botones">
  <input id="alta" type="submit" value="Registrarse" />
</li>
 
</ul>
</form>
 
</div>


</body>

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)