HTML5 Manejo de Formularios II

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

Bueno compañeros, vamos a seguir viendo más novedades en el manejo de formularios con Html5, ahora vamos a ver nuevas propiedades y nuevos tipos de campos, para ello ustedes con base a los anteriores post van a crear un formulario y vamos agregando diferentes tipos de campos tales como los que muestro a continuación.

form2

la propiedadad rows se utiliza en los textarea para especificar la cantidad de filas disponibles que va contener el campo de comentarios para el usuario. Existe otra propiedad muy utilizada en los campos de texto y en los textarea el cual es maxlength, el cual tiene como función restringir la cantidad de caracteres permitidos en el campo o el tamaño del campo, funciona de la misma manera que min y max.

el formulario anterior visto desde el navegador se visualiza de la siguiente manera:

nav2

Miremos ahora como se implementan en un formulario los campos select (combobox) tradicionales y los select múltiples, en la siguiente imagen les muestro como se realizan cada uno de ellos.

select

Ahora bien, si llegado el caso, llegasen a necesitar una caja de texto de solo lectura, la pueden crear facilmente solo agregando a la cala de texto la propiedad readonly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="" method="Post" name="form">
           
            <label>Combo tradicional</label>
            <select required name="opc">
                <option value="">Seleccionar</option>
                <option value="opcion1">Opcion1</option>
                <option value="opcion2">Opcion2</option>
                <option value="opcion3">Opcion3</option>
            </select>
           
            <br><br>    
           
            <label>Combo Multiple</label><br>
            <select required name="opc2" multiple>
                <option value="opcion1">Opcion1</option>
                <option value="opcion2">Opcion2</option>
                <option value="opcion3">Opcion3</option>
            </select>
           
            <br><label>campo solo lectura</label>
            <input type="text" readonly name="caja" value="valor inmodificable">
           
            <input type="submit" name="enviar" value="Enviar">
        </form>

Ahora veamos como se ve en nuestro navegador web.

combo