En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.Formulario - controles con valores iniciales.
Un control puede aparecer cargado con un valor por defecto. Veamos como inicializar con valores por defecto para cada uno de los controles que hemos visto.
Para inicializar un control de tipo text debemos dar un valor a la propiedad value:
<input type="text" value="aqui su nombre" name="nombre" size="20">
El control aparece cargado con la cadena "aqui su nombre".
Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca:
<textarea rows="10" cols="40" name="curriculum">Ingrese aqui su curriculum</textarea>
El control textarea se inicializa con la cadena "Ingrese aqui su curriculum"
Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor:
<input type="checkbox" name="java" checked>Opcion 1<br>
Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario.
Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad:
<input type="radio" name="estudios" value="1" checked>Opción 1<br>
Para inicializar un control de tipo select con selección individual debemos definir la propiedad selected de los elementos option:
<select name="pais"> <option value="1">Argentina</option> <option value="2" selected>España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select>
En este caso aparece seleccionado España, más alla que sea el segundo option en la lista.
Para inicializar un control de tipo select con selección múltiple debemos definir la propiedad selected de varios elementos option:
<select name="colores[]" size="4" multiple="multiple"> <option value="1" selected>Rojo</option> <option value="2">Verde</option> <option value="3" selected>Azul</option> <option value="4">Amarillo</option> <option value="5" selected>Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select>
En este ejemplo los items Rojo,Azul y Blanco aparecen seleccionados desde un comienzo.
Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si),seguidamente el teléfono (cargar por defecto 453-) y por último en un textarea solicitar que ingrese comentarios.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html>
Formulario - orden de foco de controles.
Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego del text de la segunda fila y primer columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila):
<head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7"> <br> <input type="text" name="text4" size="5" tabindex="2"> <input type="text" name="text5" size="5" tabindex="5"> <input type="text" name="text6" size="5" tabindex="8"> <br> <input type="text" name="text7" size="5" tabindex="3"> <input type="text" name="text8" size="5" tabindex="6"> <input type="text" name="text9" size="5" tabindex="9"> <br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html>
Como podemos observar los valores definidos para la propiedad tabindex para la primer fila de controles text es:
<input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7">
Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los text por columna podremos observar que si van en forma secuencial.
Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activación o foco del control.
Formulario - Inhabilitar controles.
Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.
Supongamos que disponemos 3 controles de tipo radio para indicar que sección del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no está disponible. Esto lo resolvemos deshabilitando un radio:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la sección donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Niños<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html>
Para deshabilitar el primer radio añadimos la propiedad disabled sin asignarle valor:
<input type="radio" name="seccion" value="1" disabled>Niños
Los siguientes elementos pueden inhabilitarse:
button, input, optgroup, option, select y textarea.
Esta propiedad tiene mucha aplicación si se aplica javascript en la página. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.
Búsqueda personalizada
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
0 comments:
No insertes enlaces clicables, de lo contrario se eliminará el comentario. Si quieres ser advertido via email de los nuevos comentarios marca la casilla "Notificarme". Si te ayudé con la publicación o con las respuestas a los comentarios, compártelo en Facebook, Twitter, Tumblr, Google +, Pinterest o Instagram. Gracias.