3. • Primero y principal hay que crear las
etiquetas <form> con sus respectivos
atributos.
<form action=”contacto_script.php”
method=”post” id=”contacto”>
</form>
4. • Vamos a explicar un poquito que es cada atributo y para qué sirve:
• action: aquí es donde vamos a hacer que se envíen todos los datos, el archivo
contacto_script.php va a procesar toda la información enviada y decidirá cómo continuar, si
hubo un error, si fue correcto, etc.
• method: le especificamos cómo queremos que se envíe la información, a través del método
POST o del método GET.
Qué diferencia hay entre cada método.
• Básicamente se envía información a través del método POST cuando se desea que ese
envío de información sea oculto, o si se está enviando mucha información. Por lo general la
página que recibe esa información no va a ser re-cargada, ya que si hacemos refresh en
una página que acaba de recibir información vía POST el navegador nos avisará con un
cartelito que estamos intentando recargar una página y que se va a enviar toda la
información de nuevo, por un lado es molesto y por otro puede que el navegador no haya
guardado correctamente toda la información enviada originalmente y falle.
• El metodo GET, por el contrario, cuando completamos un formulario que envía los datos
atraves de GET, esta información nos va a aparecer en la URL del sitio, si se fijan, cuando
realizan una búsqueda en Google, esta se hace a través de un formulario con método GET,
ya que en la URL nos aparece toda la información que nosotros buscamos más otras
variables.
5. • Ahora bien ¿Cuándo es aconsejable usar uno u otro método?, cuando se realiza un
formulario de búsqueda, o un formulario para filtrar la información mostrada o cambiar el
orden de la información mostrada (En un listado de departamentos en alquiler, cambiar el
orden por mejor precio, por número de ambientes, etc.) es aconsejable usar el metodo GET,
ya que el usuario es muy probable que entre en una página y luego vuelva para atrás, en
esta vuelta para atras, esta haciendo refresh de la pagina con los resultados de busqueda,
si hubiese sido por POST, el navegador hubiese mandado la alerta de que se esta
intentando entrar en una página que recibio informacion via POST y podría no mostrar la
informacion correctamente.
• Por el contrario, es aconsejable utilizar el método POST cuando se desea enviar mucha
información, o es información que no va a cambiar por decisión del usuario, es decir, no es
un filtro, sino un formulario de contacto, para escribir una nueva entrada en nuestro blog,
crear un tema en un foro, etc.
• id: lo usamos para identificar el formulario, ya que podemos llegar a tener muchos
formularios en una misma página y queremos que se identifique bien cada formulario. Aqui
elegimos el nombre que queremos.
6. • Los diferentes campos que podemos tener en un formulario son inputs, selectbox y textarea. A su vez
los inputs se dividen en de tipo texto, radio, checkbox, password, hidden, button, submit, reset.
Inputs.
• El más común de todos es el de tipo text. Este sirve para completar una
sola linea de texto y tiene que tener las siguientes propiedades.
<label for=”input_campo”>Nombre Campo</label>
<input id=”input_campo” type=”text” name=”nombreCampo” value=”" />
Primero van a ver una etiqueta label que no la nombré antes. Esta etiqueta no
es obligatoria incluirla, pero es lo correcto, con la misma le van a poder indicar
un nombre al campo para que todo el mundo sepa lo que está completando.
En el for tienen que incluir la id del campo.
La id del input es un identificador único, no puede haber ningún otro elemento
con este nombre en toda la página. El nombre es a gusto de ustedes, pero
por convención se utilizan nombres relacionados con el elemento que están
identificando.
7. Consejo: a la hora de crear una id es muy útil, ponerle primero el tipo de elemento html
que es y luego que representa, si se fijan se eligió input_campo, ya que es un input,
pero ahí podría ser input_direccion, input_telefono, input_email. Esto les va a
resultar útil a la hora de armar un CSS o realizar acciones con Javascript. Van a poder
identificar el elemento muy fácilmente.
Con type le indicamos el tipo de input que es, en este caso es un texto, name es
obligatorio y lo utilizaremos para levantar la variable POST y value es el contenido del
campo, si lo dejamos con las dos comillas y sin contenido por defecto no nos va a
aparecer nada en el campo, sino podemos completarlo con alguna frase del estilo para
que nos aparezca adentro del campo.
<label for=”input_contacto”>Nombre Campo</label>
<input id=”input_contacto” type=”text” name=”nombreContacto” value=”Complete con sus nombres y
apellidos” />
Estos dos campos se ven de la siguiente
manera:
8. Los inputs de tipo text los utilizamos para casos en que el usuario debe completar un solo
reglón. Como completar con sus nombres y apellidos, dirección, teléfono, email, etc.
También tenemos los inputs de tipo Radio, cuya sintaxis es la siguiente:
<label for=”input_si”>Si</label><input id=”input_si” type=”radio” name=”suscribirse” value=”si” />
<label for=”input_no”>No</label><input id=”input_no” type=”radio” name=”suscribirse” value=”no” />
¿Qué tenemos acá? Fíjense que name es el mismo para ambos inputs, lo que cambia es
el value (y la id obvio, no se puede repetir id en toda la pagina). Este tipo de campos es
autoexcluyente, sólo se puede marcar una opción, y por php se recibirá únicamente el
valor que fue marcado. El mismo se ve de la siguiente manera:
Otro caso similar es el tipo Checkbox, los clásicos cuadraditos que se utilizan para tildar y
destildar, es muy común ver este tipo de inputs antes de registrarnos en algún lugar y que
nos pregunten si estamos de acuerdo con los términos y condiciones.
La sintaxis es la siguiente:
<input id=input_acuerdo” type=”checkbox” name=”acuerdoLegal” value=”1″ />
En caso de que NO este marcado por el usuario al momento de hacer un submit del formulario, este campo
no se envía y al procesarlo por Php, veremos que no existe la variable POST correspondiente a este campo.
9. Otro tipo de input es Password, esta propiedad hace que el campo en lugar de ver el
texto que se escribe en él, aparezcan los clásicos redondelitos negros ocultando la
información.
<input id=”input_password” type=”password” name=”password” value=”" />
Luego tenemos el tipo Hidden, que es un campo oculto, en el podemos poner
información pre-definida que el usuario no tiene que completar, entonces no se muestra
pero si se envía.
<input type=”hidden” name=”idUsuario” value=”25″ />
Por último vamos a ver el tipo Submit que es el campo que va a enviar nuestro
formulario.
<input type=”submit” name=”submit” value=”Enviar consulta” />
que se va a ver de la siguiente forma
10. Textarea.
Los textarea funcionan muy similar a un campo input de tipo text con la particularidad
de que se pueden agregar saltos de linea, es decir escribir bloque de textos completos
con diferentes párrafos.
La sintaxis es la siguiente:
<textarea id="textarea_comunicacion" name="comunicacion" rows="10" cols="50"></textarea>
La id es exactamente igual que en los casos anteriores, con name vamos a definir el
nombre de la variable que vamos a levantar con PHP via POST, rows es el número de
filas que queremos que tenga nuestro campo y cols es el ancho.
Entre los tags <textarea> y </textarea> se puede incluir un texto para que aparezca por
defecto, por ejemplo:
<textarea id="textarea_comunicacion" name="comunicacion" rows="5" cols="50">Escribe aquí lo que quieras</textarea>
11. SelectBox.
Los selectbox sirven para presentarle al usuario un listado de opciones pre-fijadas y que
no puedan ser modificadas. Existen dos tipos de selectbox, aquellos donde el usuario
solo puede seleccionar una opción, u otros donde se le permite seleccionar más de
una.
La sintaxis del que permite seleccionar sólo uno es la siguiente:
<select id="select_sexo" name="sexo">
<option value=”M”>Masculino</option>
<option value=”F”>Femenino</option>
</select>
Nuevamente, el id y el name es lo mismo que los casos anteriores y acá se agrega una
nueva etiqueta option que es cada opción que queremos que aparezca en el formulario.
Lo que esta entre las etiquetas <option> y </option> es lo que va a ver el usuario, pero
PHP va a obtener la información que figura en el atributo value. Y únicamente de la
opción seleccionada.
<select id="select_gustos" name="gustos" multiple="multiple">
<option value=”1″>Me gusta jugar al Tennis</option> Para poder seleccionar múltiples
<option value=”2″>Me gusta jugar al Futbol</option> opciones hay que dejar apretada la
<option value="3">Me gusta jugar al Correr</option> tecla Ctrl.
</select>
12.
13. "Nadie es responsable de tu vida, sólo
Tú mismo,
no culpes a ningún otro ser de lo que
Tú no has podido lograr",
tu felicidad, tu realización o tu
mediocridad solamente tiene un autor,
TÚ.
Vive de hoy en adelante con esa
verdad y atrévete a ser para lo que
fuiste creado:
