html clase 12 - formularios II

Buenas, hoy continuaremos con formularios:

Había dicho que es una parte muy importante del desarrollo web, ya que un formulario es una herramienta imprescindible en HTML por que se encarga de gestionar los datos introducidos por el usuario. Un sitio Web interactivo y dinámico dispone de un formulario para gestionar la comunicación entre los usuarios, para enviar archivos a un servidor, para procesar un pedido o incluso, seleccionando diferentes controles de un formulario, cambiar la interfaz de una página Web.

Como aprendimos en la anterior clase, con la etiqueta <form> podemos delimitar un formulario, y en el incluir: cuadros de texto, áreas de texto, casillas de verificación, botones de opción, cuadros de lista, campos de formularios ocultos, botones de envío o de restablecimiento, etc. Casi todos estos elementos (excepto las áreas de texto y los cuadros de lista) se construyen con una sola directiva <input>. Esta directiva dispone de un atributo (type), con el cual, con solo cambiar su valor (text, checkbox, radio, etc.), obtendremos el tipo de control que necesitamos.

aprendimos a crear un campo de texto con el input del tipo text de esta forma:

<input type="text" name="nombre">

pero si queremos hacer que puedan agregar un texto mas extenso tendremos que realizarlo de esta otra forma:

<textarea name="comentario"></textarea>

la etiqueta textarea, genera una area del tipo texto, permite ingresar mas cantidad de caracteres.

para generar el botón de envío de formulario utilizamos un input del tipo submit:

<input type="submit" name="enviar">

pero si queremos reiniciar el formulario podemos usar uno del tipo reset, de esta forma:

<input type="reset" name="restablecer">

veamos entonces el código del formulario completo:

<form>

nombre:

<input type="text" name="nombre">

<br><br>

apellido:

<p><input type="text" name="apellido">

<br><br>

comentario:

<textarea name="comentario"></textarea>

<br><br>

<input type="submit" name="enviar">

<br>

<input type="reset" name="restablecer">

</form>

para verlo en funcionamiento

clickea aqui.

nota: no le agregue diseño para que tengan solo el código, quien quiera ejercitar con el diseño pueden probar agregar un css.

hasta la próxima clase!