HTML: Preasignar un Formulario HTML con Datos

En este tutorial, me gustaría mostrarle cómo asignar previamente los diferentes cuadros de entrada y campos de opciones HTML con datos o valores predeterminados. 

A continuación, puede encontrar ejemplos de los siguientes elementos de entrada HTML - cada uno con y sin asignación previa:

• Campo de Entrada de Texto de una sola Línea: Input Text
• Cuadro de Texto Multilínea: Textarea
• Interruptor de Opción: Checkbox y Radiobutton
• Lista de Selección: Select

Si se establecen los valores predeterminados, el visitante de su página puede encontrar el ajuste preestablecido directamente después de cargar el sitio web.

Input Text - Campo de Entrada de Texto de una sola Línea

Se puede definir un campo de entrada de texto de una sola línea con <input type="text"> en HTML.

<input name="it" type="text">
<input name="it" type="text" value="">

El preajuste de texto se define mediante el atributo "value". Si omite completamente este atributo o si escribe value="", que es una cadena vacía, el campo de entrada de texto permanece vacío.

<input name="it" type="text" value="Text in the Input Field.">

Al definir una cadena / string entre las comillas detrás de "value", este texto se utiliza como valor por defecto para el campo de entrada.

Textarea - Cuadro de Texto Multilínea

Un Textarea es un gran campo de varias líneas para la entrada de texto.

<textarea name="ta"></textarea> 

Un área de texto vacía se define por <textarea></textarea>.

<textarea name="ta">
This text appears in the text field.
</textarea> 

Puede establecer un preajuste simplemente escribiendo el texto predeterminado entre la etiqueta de apertura <textarea> y la etiqueta de cierre </textarea>.

Checkbox y Radiobutton - Interruptor de Opción

Las casillas de verificación y los botones de radio son interruptores de opciones, en los que el usuario puede hacer un gancho. La diferencia entre una casilla de verificación y un botón de radio es que las casillas de verificación se pueden activar y desactivar de forma independiente entre sí, mientras que solo puede haber un botón de radio de un grupo de botones de opción que se puede seleccionar al mismo tiempo.

<input type="checkbox" name="cb1" value="cb1">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1">

Aquí, definimos dos casillas de verificación que se pueden seleccionar de forma independiente entre sí, así como cuatro botones de radio que se agrupan en dos grupos diferentes. La asignación de grupo se determina por tener el mismo nombre. En este ejemplo, no se establece ningún gancho.

<input type="checkbox" name="cb1" value="cb1" checked="checked">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0" checked="checked">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1" checked="checked">

Para establecer una marca de verificación de forma predeterminada, agregamos el atributo "checked" con el valor "checked", que está checked="checked". En el ejemplo, hemos enganchado y activado la primera casilla de verificación, así como un botón de radio de cada grupo.

Select - Lista de Selección

Podemos definir una lista de selección mediante <select> .. </select>. Dentro de eso, podemos escribir los elementos seleccionables con <option> .. </option>. El atributo "size" define cuántas opciones están visibles al mismo tiempo. Si usa 1 para esto, el resultado es una lista desplegable (drop-down list).

<select name="sel" size="1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Si usamos la lista de este ejemplo, automáticamente, el primer elemento (la "A" aquí) está preseleccionado.

<select name="sel" size="1">
  <option>A</option>
  <option selected="selected">B</option>
  <option>C</option>
</select>

Para preseleccionar otro elemento de la lista, podemos usar el atributo HTML "selected" como en el siguiente ejemplo. Esto haría una preselección del elemento "B".