Tema 6 - Formularios en html

10
FORMULARIOS EN HTML

Transcript of Tema 6 - Formularios en html

Page 1: Tema 6 - Formularios en html

FORMULARIOS EN HTML

Page 2: Tema 6 - Formularios en html

El elemento <form></form>

• Engloba siempre a un formulario web

• Incluye los atributos:

• method - Especifica lo que ocurre con los datos cuando se completa el formulario.

• action - URL del script que va a recibir y procesar los datos enviados.

Page 3: Tema 6 - Formularios en html

El elemento <input/>

• Dependiendo del tipo, puede tomar muchas formas y adoptar diversas funcionalidades

1. text

2. password

3. radio

4. checkbox

5. submit

6. reset

Formularios

******

Enviar

Borrar

Page 4: Tema 6 - Formularios en html

El elemento <input/>

<input name="nombre" type="text" maxlength="50"/>

<input name="pass" type="password" maxlength="15"/>

Formularios

******

• name - propósito del campo.

• maxlength - cantidad máxima de caracteres en el campo.

Page 5: Tema 6 - Formularios en html

El elemento <input/>

<input type="radio" name="gen" value="h" /> Hombre <input type="radio" name="gen" value="m" /> Mujer

<input type="checkbox" name="pref" value="1" /> Twitter <input type="checkbox" name="pref" value="2" /> Facebook

Hombre Mujer

Twitter Facebook

Page 6: Tema 6 - Formularios en html

El elemento <input/>

<input name="enviar" type="submit" value="Enviar"/>

<input name="borrar" type="reset" value="Borrar"/>

Enviar

Borrar

Page 7: Tema 6 - Formularios en html

El elemento <textarea></textarea>

<textarea name="sugerencia"></textarea>

Comentarios o sugerencias

Page 8: Tema 6 - Formularios en html

El elemento <select></select>

<select name="autos"> <option value="0">Selecciona un auto...</option> <option value="1">Volvo</option> <option value="2">Smart</option> <option value="3">Mini Cooper</option> <option value="4">Atos</option>

</select>

Selecciona un auto...

Volvo Smart Mini Cooper Atos

Page 9: Tema 6 - Formularios en html

El elemento <label></label >

<label for="nombre">Nombre:</label> <input name="nombre" type="text" maxlength="50"/> Nombre:

Carlos Montoya

Page 10: Tema 6 - Formularios en html

El elemento <fieldset></fieldset >

<fieldset> <legend>Datos personales</legend> <label for="nombre">Nombre:</label> <input name="nombre" type="text" maxlength="50"/> <label for="apellidos">Apellidos:</label> <input name="apellidos" type="text" maxlength="50"/>

</fieldset>

Carlos

Montoya

Nombre:

Apellidos:

Datos personales