22 Votos

HTML: Preasignar un Formulario HTML con Datos

Tutorial de Stefan Trost | 13/05/2021 a las 01:17

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:

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".

ResponderPositivoNegativo

Sobre el Autor

AvatarPuede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil

 

Temas Relacionados

MySQL: Saltos de Línea en MySQL

Consejo | 0 Comentarios

CSS: Cómo incluir CSS en HTML

Tutorial | 0 Comentarios

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.