Desarrollo Web

Laura Mercedes Bautista Pabón

San José Fundación De Educación Superior

Notas Del Autor

Laura Mercedes Bautista Pabón, San José Fundación Superior
San José Fundación Superior, Calle 67 No. 14 A-29
Contacto: Lalabautista015@Gmail.Com
 Autoridades Académicas
Desarrollo Web
San José Fundación De Educación Superior

Francisco Pareja Gonzales

Fundador

Carlos Francisco Pareja Figueredo

Rector

Victor Julio Duarte Baez

Asesor De Programa

Bogotá D.C.
21 – 08 – 2022
 Construye la etiqueta <form>

Abre tu documento HTML con tu editor de texto preferido. Aquí utilizaremos el

elemento <form> como contenedor de otro tipo elementos como campos de texto, botones de
opción, casillas de verificación, botones de envío, etc.

Al escribir la etiqueta <form> estarás iniciando tu formulario. Recuerda que este

elemento funciona como contenedor, del mismo modo que lo hacen otras etiquetas tales como
<div></div> o <table></table>.

Elementos principales

El elemento HTML <form> puede contener uno o más de los siguientes elementos de
formulario:

<form> <labe> <select> <textarea> <button> <fieldset> <legend> <datalist>

<output><option> <option> <optgroup>

Veamos algunos de estos elementos en detalle

Elemento <input>

<input>es uno de los elementos más importantes y se puede mostrar de varias formas,
dependiendo del atributo “type” que definamos, como “button”, “date”, “color”, “date”,
“password”, etc.

Elemento <label>

El elemento <label> define una etiqueta para varios elementos de formulario.

Elemento <select>

El elemento <select> dentro de un <form> permite definir una lista desplegable. ¿Y

cómo puedo definir opciones? A través del elemento <option> que define la opción que se
puede seleccionar.

Si bien de manera predeterminada se selecciona el primer elemento de la lista

desplegable, es posible pre-seleccionar otra opción a través del atributo selected.
 Además, con el atributo “size” puedes especificar el número de opciones disponibles, y
con “multiple” habilitar al usuario a seleccionar más de un valor.

Elemento <textarea>

El elemento <textarea> permite definir un campo de texto de varias líneas. Aquí

puedes utilizar los atributos “cols” y “rows” para definir el ancho del área y la cantidad de
líneas de texto visibles.

Elemento <button>

<button> nos permite definir un botón cliqueable dentro de nuestro formulario. Mira
este ejemplo:
 Elemento <datalist>

Si queremos que los usuarios vean una lista desplegable con opciones predefinidas a
medida que ingresan sus datos, lo recomendado es utilizar el elemento <datalist> el cual nos
permite especificar esa lista de opciones predeterminadas para un elemento <input>.
 Añadir un grupo de radio buttons en un formulario HTML

Los radio buttons, también llamados option buttons, que español se suelen llamar
botones de radio o botones de opciones, son elementos HTML para formularios que
permiten elegir una sola opción entre un grupo. El comportamiento es similar a un select
de selección única, salvo que las distintas opciones se presentan de forma explícita en
lugar presentarse en un despegable.

Sintaxis

Para mostrar un botón de radio en HTML se utiliza el elemento input con el

atributo type="radio":

<input type="radio">

Cómo cualquier otro elemento input, el atributo name es necesario, ya que es

enviado junto a los datos del formulario y es utilizado en el servidor para identificar a
cada campo. El valor del radio button, también como en otros input, se establece con el
atributo value. Por ejemplo:

<input type="radio" name="color" value="azul">

En los radio buttons, el atributo name se utiliza además para definir un grupo de
opciones. Un conjunto de radio buttons con el mismo name, pertenecen al mismo grupo
de opciones. El usuario solo podrá elegir una opción de cada grupo. En el siguiente
ejemplo se definen dos grupos: color y número:

<form>

<fieldset>

<legend>Elige un color</legend>

<label>

<input type="radio" name="color" value="azul"> Azul

</label>

<label>
 <input type="radio" name="color" value="negro"> Negro

</label>

<label>

<input type="radio" name="color" value="amarillo"> Amarillo

</label>

</fieldset>

<fieldset>

<legend>Elige un número</legend>

<label>

<input type="radio" name="numero" value="1"> 1

</label>

<label>

<input type="radio" name="numero" value="2"> 2

</label>

<label>

<input type="radio" name="numero" value="3"> 3

</label>

<label>

<input type="radio" name="numero" value="3"> 4

</label>

</fieldset>

</form>
 En nuestro ejemplo, haremos uso del atributo checked, para indicarle al navegador que
debería marcar la casilla de verificación cuando la página esté cargada y cuando el formulario
esté restaurado.

<form action="../../form-result.php" method="post" target="_blank">

<p>

Intereses:<br>

<label><input type="checkbox" name="cb-html5" checked> HTML5</label><br>

<label><input type="checkbox" name="cb-css3" checked> CSS3</label><br>

<label><input type="checkbox" name="cb-javascript"> Javascript</label>

</p>

<p>

<input type="submit" value="Enviar datos">

<input type="reset" value="Restaurar formulario">

</p>

</form>

Atributos

Este elemento incluye atributos globales .

autofocus HTML5

Este atributo permite especificar un formulario de control que debería tener un enfoque
de entrada cuando se carga la página, a no ser que el usuario lo sobreescriba, por ejemplo,
escribiendo un control diferente. Solo un elemento de formulario puede tener el elemento de
enfoque de entrada por documento, por lo cual es un atributo booleano.

disabled
 El atributo booleano especifica que el usuario no puede interactuar con el control. Si
este atributo no está especificado, el control hereda los ajustes del campo que lo contiene, por
ejemplo del campo establecido; si no hay elemento contenido con el atributo disabled,
entonces el control se considera enable (activado).

form HTML5

El elemento formulario al cual el select está asociado (su propietario del formulario). Si
este atributo está especificado, su valor deberá ser el ID de un formulario en el mismo
documento. Esto te permite situar elementos en cualquier parte del documento, no solo de
manera descendente con respecto a su elemento formulario.

multiple

Este elemento booleano indica que se pueden seleccionar múltiples opciones de la lista.
Si no está especificado, solo se podrá seleccionar una opción cada vez.

name

El nombre del elemento de control.

required HTML5

Es un elemento boooleano que indica si la opcion puede quedar sin seleccionar o si es

requerida.

size

Si el control se presenta como una lista con scroll en caja, este atributo representa el
número de filas que la lista tendrá visible la primera vez. Los navegadores no están requeridos
a presentar un elemento seleccione como una lista con desplazamiento en caja. El valor por
defecto es cero.

Nota de Firefox: De acuerdo con las especificaciones de HTML5, el tamaño por

defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs,
y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar
usando 0 desde que empezó con Firefox.

Interfaz DOM
 Este elemento implementa la interfazHTMLSelectElement.

Ejemplos

<!-- The second value will be selected initially -->

<select name="select">

<option value="value1">Value 1</option>

<option value="value2" selected>Value 2</option>

<option value="value3">Value 3</option>

</select>

Bibliografía

https://blog.soyhenry.com/como-crear-formularios-
html/#:~:text=Construye%20la%20etiqueta,form%3E%20estar%C3%A1s%20iniciand
o%20tu%20formulario.

https://cybmeta.com/anadir-un-grupo-de-radio-buttons-en-un-formulario