Tarea 3 - 5. Ya merito
Procesamiento en el cliente vs procesamiento en el servidor
El siguiente tema que debemos tratar es...
Formularios HTML
- Text Box (Caja de Texto).- Un text box es utilizado para teclear información en el, y luce de la siguiente forma:
- Check Box.- Es un control que sirve para escoger una o mas opciones dentro de una lista. Al estar seleccionado se "checa". Este es un ejemplo de una lista de Check Boxes:
Opcion 2
Opcion 3
- Radio Button.- Permite escoger SOLO UNA opción dentro de una lista de opciones. Una lista de Radio Buttons luciria de la siguiente manera:
Opción A
Opción B
Opción C
Opción D
- Drop Down List (Lista Desplegable).- Despliega una lista de opciones al hacer click sobre el objeto, permitiendo seleccionar una de las opciones. Luce de la siguiente forma:
- List Box (Lista Desplegada).- Las opciones ya estan desplegadas en la lista, por lo tanto, ocupa un mayor espacio. Así se veria:
- Scrolling Text (Area de Texto).- En este caso, el texto que se va a teclear puede tener varias lineas, no solamente una. Este es un ejemplo:
- Command Buttons (Botones).- Existen normalmente solo dos botones en cada forma, uno para mandar la información (Submit) y otro para cancelar (Reset). Así es como se ven estos botones:
Lo primero, es decir que la forma en si, aunque no se ve físicamente en la página web, es el "contenedor" de todos los demas controles. Esta definida por los tags
<form>
...
</form>
Perfecto... ahora vamos a repasar cada uno de los elementos que explicamos al principio... como este no es un curso de HTML, va a ser "por encimita"... solo voy a mencionar los tags que se utilizan, y algunas de las propiedades. Bueno, antes que nada, es importante mencionar que existe un tag que engloba a cuatro tipoS de objetos (Text Box, Check Box, Radio Button y Command Button)... suena complicado, pero no es asi... el tag al que me refiero es <INPUT> y lo que determina que tipo de control se despliega, es el atributo TYPE. Dependiendo del valor de este atributo, será el tipo de control desplegado. Yo se que suena medio complicado, pero no es así... al final de la explicación de todos los objetos, voy a poner un código HTML utilizando todos los objetos, y despues como se vería en pantalla, para que lo puedan comparar.
En el caso del Drop Down List, y del List Box, también se utiliza el mismo tag <SELECT> y la diferencia entre ellos dos será el valor del atributo SIZE, al cual se le debe asignar el valor 1 si se desea un Drop Down, y cualquier valor mayor que 1 si se desea un List Box.
En el caso del Scrolling Text, se utiliza el tag <TEXTAREAgt; utilizando los atritbutos ROWS y COLS para definir el número de renglones y columnas que tendrá, respectivamente. Ok, estos son los diferentes objetos que se pueden utilizar en una forma...
Bueno, como les comentaba, este no es un curso de HTML... existen un buen de atributos de cada objeto (y mas objetos, también, como por ejemplo, tablas) que se pueden usar... ya dependerá del interés de cada quien el ponerse a buscar y estudiarlos... lo que si les puedo decir es que existen dos atributos bien importantes, y que los tienen casi todos los objetos: NAME y VALUE... por lo pronto recuerdenlos, porque más adelante verán porque son importantes.
Ahora les voy a poner el ejemplo del código HTML de una forma, con varios de estos elementos, para que lo puedan analizar... además, debajo del código pondre como se verá la forma en la página.
<form>Y así se veria en la página:
<div align="center"><center><table border="1" width="100%">
<tr>
<td><p align="center"><font size="4"><strong>Datos
Personales:</strong></font></p>
<table border="0">
<tr>
<td valign="top"><strong>Nombre:</strong></td>
<td><input type="text" size="25"
name="Nombre"></td>
</tr>
<tr>
<td valign="top"><strong>Apellido:</strong></td>
<td><input type="text" size="25"
name="Apellido"></td>
</tr>
<tr>
<td valign="top"><strong>Edad:</strong></td>
<td><select name="edad" size="1">
<option>12-18</option>
<option>19-25</option>
<option>25-35</option>
<option>35-50</option>
<option selected>Seleccione una Edad:</option>
</select></td>
</tr>
<tr>
<td valign="top"><strong>Profesión:</strong></td>
<td><input type="text" size="25"
name="profesion"></td>
</tr>
<tr>
<td valign="top"><strong>No. de hijos:</strong></td>
<td><select name="hijos" multiple size="4">
<option>0</option>
<option>1-3</option>
<option>3-6</option>
<option>> 6</option>
</select></td>
</tr>
<tr>
<td valign="top"><strong>Edo. Civil:</strong></td>
<td><input type="radio" checked
name="EdoCivil" value="V1">Soltero<p><input
type="radio" name="EdoCivil" value="V2">Casado</p>
<p><input type="radio" name="EdoCivil"
value="V3">Viudo</p>
<p><input type="radio" name="EdoCivil"
value="V4">Divorciado</p>
</td>
</tr>
<tr>
<td valign="top"><strong>Fecha de Nacimiento:</strong></td>
<td><select name="dia" size="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select><select name="mes" size="1">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
<option>Mayo</option>
<option>Junio</option>
<option>Julio</option>
<option>Agosto</option>
<option>Septiembre</option>
<option>Octubre</option>
<option>Noviembre</option>
<option>Diciembre</option>
</select><input type="text" size="6"
name="ano" value="19"></td>
</tr>
<tr>
<td valign="top"><strong>Idiomas:</strong></td>
<td><input type="checkbox" checked
name="espanol" value="ON">Español<p><input
type="checkbox" name="ingles" value="ON">Inglés</p>
<p><input type="checkbox" name="italiano"
value="ON">Italiano</p>
<p><input type="checkbox" name="aleman"
value="ON">Alemán</p>
</td>
</tr>
<tr>
<td valign="top"><strong>Experiencia
Profesional:</strong></td>
<td><textarea name="Experiencia" rows="8"
cols="25">Escriba aquí su experiencia profesional</textarea></td>
</tr>
<tr>
<td><input type="submit" name="B1"
value="Submit"><input type="reset" name="B2"
value="Reset"></td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</center></div>
</form>
Con esto terminamos la explicación de lo que es una forma, y sus elementos... lo único que nos falta es definir... para que demonios sirve una forma???
Ah verdad... que dijeron, este guey nos tiro un choro enorme, y no nos dice para que sirve todo este desma... bueno... les explicaré el porque... primero que nada, porque es un punto dentro de nuestros temas que se tratará mas adelante... y segundo, porque primero era necesario entender que demonios es una forma...
Una vez dada esta explicación, dejenme les digo que el uso principal que se le da a una forma, es el de recolectar datos... Por ejemplo, digamos que quieres registrar a un nuevo usuario de tu sitio... para esto, necesitas información como el Nombre, Dirección, ID de Usuario, Password... y tal vez estado civil (Casado o Feliz... digo, Soltero), Preferencias, etc... toda esta información puede ser recopilada utiizando una forma, con los diferentes objetos que ya se explicaron anteriormente. Una vez que se tienen, estos datos pueden ser procesados de diferentes formas... por medio de un script en ASP, por ejemplo y agregados a una base de datos, etc. Como??? eso lo veremos más adelante... solo les digo que en ese caso, son muy importantes los atributos NAME y VALUE...