html

Estás en: Inicio >> HTML >> Formulario con HTML
Crear un Formulario con HTML
0
ESCRITO POR GIAN OLIVEIRA
EN HTML · WORDPRESS
— 26 MAY, 2013
Cuando comencé en este mundo hace ya unos 8 años una de las cosas que más me intrigaba era como crear un formulario en HTML y sobretodo cómo hacerlo funcionar. Comencé con Dreamweaver y gracias a que este programa que es muy intuitivo logré crear miformulario en HTML pero por mucho que lo intentara no funcionaba. Después de investigar un poco me di cuenta de que necesitaba algo más y así fue como comencé a estudiar PHP que es el complemento que necesitaba para que mi formulario en HTML funcionara. No es la finalidad de este blog tratar temas de programación avanzada pero iré tocando puntualmente algunos “scripts” necesarios relacionados concada artículo.

1 Creando un formulario en HTML.
Continuando el artículo de introducción al HTML vamos a ampliar esa información en este artículo centrándonos en la estructura básica de un formulario. Veamos con un ejemplo como crear un formulario en HTML:
1

2
    

3
        Formulario de Ejemplo
4
            Nombre

5
                
6
            Email

7
                8
            

9
    
10

a. Etiqueta form.
Esta etiqueta es la que define dentro de nuestra estructura HTML el inicio de un formulario y está compuesta por:
id: indica un nombre del formulario para que pueda ser personalizado mediante CSS.
action: define el destino a donde irán los datos del formulario en HTML. En nuestro ejemplo el destino será un archivo llamado “enviado.php”.method: indica la forma en la que será enviado el formulario en HTML.
enctype: indica la forma en la que se enviará la información a través del formulario en HTML.
b. Etiqueta fieldset.
Esta etiqueta es de uso opcional y se utiliza para agrupar elementos en común dentro de un mismo formulario en HTML. Se suele utilizar junto a la etiqueta legend que le da un título al conjuntos de elementosdefinidos en el fieldset.
c. Etiqueta label.
Esta etiqueta se utiliza para definir el nombre visible de cada uno de los campos del formulario en HTML.
d. Etiqueta input.
Esta etiqueta corresponde a los campos del formulario que necesitamos para su funcionamiento. Esta está definida por:
id: indica un nombre único del campo para que pueda ser personalizado mediante CSS.
name: indica el nombre únicodel campo en el formulario en HTML y este nombre es el que nos permitirá realizar el envío de los datos de cada campo.
type: indica el tipo de campo y la acción que tendrá dentro delformulario en HTML. Existen varios tipos de campos input en un formulario:
text: para agregar una cadena de caracteres ya sean letras o números.
hidden: indica que será un campo oculto para el envío de datos que noserá visible para el usuario.
password: se utiliza para los formularios de registro y los caracteres escritos serán mostrados en forma de asteriscos o puntos.
checkbox: casillas de verificación.
radio: botones de opción.
submit: este type se le asigna a un campo input para realizar el envío del formulario en HTML. También existe el type reset que es para borrar todos los campos del formulariosi no se desea realizar el envío.
e. Otras etiquetas.
Además de las etiquetas anteriormente mencionadas para nuestro ejemplo existen otras etiquetas que se usan frecuentemente en los formularios. Los más comunes son:
select: este campo se configura con varias opciones para ser seleccionadas de una lista.
textarea: este campo es utilizado para escribir comentarios largos como el queutiliza WordPress en sus artículos.
Ahora vamos a crear un archivo nuevo y lo vamos a llamar “formulario.html” y lo guardaremos en la raíz de nuestro servidor con el siguiente código:
1

2


3
Formulario de Ejemplo
4


5
 
6


7

8
    

9
        Formulario de Ejemplo
10
            Nombre

11
                
12
            Email

13
                
14
            ...