Curso IT Fundamentos HTML 013_Formularios y entrada del usuario

Formularios

Los formularios HTML (Form) son una parte muy importante de HTML. Permiten a los usuarios ingresar información en una página web y enviar esa información al servidor.

Ejemplo:

1
<form action="/submit" method="post">
2
  <!-- Los elementos del formulario van aquí -->
3
</form>

El elemento <form> define el área donde los usuarios ingresan datos y puede contener diferentes tipos de elementos de entrada, como áreas de texto <textarea>, listas desplegables <select>, botones de opción <radio>, casillas de verificación <checkbox> y botones <button>, etc.

Atributos del formulario:

• action: Define la URL del archivo de procesamiento en el servidor al que se envían los datos del formulario.
• method: Define el método HTTP utilizado para enviar los datos al servidor. Los valores comúnmente utilizados son “get” y “post”.
• name: Se utiliza para especificar el nombre del formulario. El nombre del formulario se utiliza para identificar el formulario y se usa en el procesamiento de datos del formulario del lado del servidor.
• enctype: Se utiliza para especificar el método de codificación de los datos del formulario. Los datos del formulario pueden codificarse mediante application/x-www-form-urlencoded o multipart/form-data.
• autocomplete: Se utiliza para especificar si se habilita la función de autocompletado del formulario. Si se establece en on, el navegador completará automáticamente los datos ingresados previamente en el formulario.
• novalidate: Se utiliza para especificar si se validan los datos del formulario. Si se establece en on, los datos del formulario no se validarán antes de enviarse.

[!Resumen]

• El elemento form en sí no es visible.

Campos de texto

En los formularios, a menudo necesitamos que los usuarios ingresen contenido de texto como letras y números. Esto se puede lograr mediante el elemento <input>, con su atributo type establecido en “text”.

Ejemplo:

1
<form>
2
Nombre: <input type="text" name="name"><br>
3
Edad: <input type="text" name="age">
4
</form>

Efecto:

[!Resumen]

• En la mayoría de los navegadores, el ancho predeterminado de los campos de texto es de 20 caracteres.

Campos de contraseña

Si necesita que los usuarios ingresen una contraseña, puede establecer el atributo type del elemento <input> en “password”, y el contenido ingresado se ocultará.

Ejemplo:

1
<form>
2
Contraseña: <input type="password" name="pwd">
3
</form>

Efecto:

[!Resumen]

• Los caracteres del campo de contraseña no se muestran en texto claro, sino que se reemplazan por asteriscos * o puntos .

Botones de opción (Radio Buttons)

Los botones de opción y las casillas de verificación permiten a los usuarios seleccionar una o varias opciones de múltiples opciones. El valor del atributo type de los botones de opción es “radio”.

Ejemplo:

1
<form action="">
2
Género:
3
<input type="radio" name="sex" value="male" checked>Masculino
4
<input type="radio" name="sex" value="female">Femenino
5
</form>

Efecto:

[!Resumen]

• El valor del atributo name de los botones de opción debe ser el mismo, de lo contrario no pertenecerán al mismo grupo.
• El atributo checked se utiliza para especificar si el botón de opción está seleccionado por defecto.

Casillas de verificación (Checkboxes)

Las casillas de verificación pueden seleccionar una o varias opciones, definidas con <input type="checkbox">

Ejemplo:

1
<form>
2
  Apps que has usado:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

Efecto:

[!Resumen]

• El atributo checked se utiliza para especificar si la casilla de verificación está seleccionada por defecto.

Listas desplegables (select)

Las listas desplegables permiten a los usuarios seleccionar una opción de múltiples opciones. Se crean con el elemento <select> y usan elementos <option> para definir las opciones.

Ejemplo:

1
<form action="">
2
  Por favor seleccione su país:
3
  <select name="country">
4
    <option value="china">China</option>
5
    <option value="us">Estados Unidos</option>
6
    <option value="japan">Japón</option>
7
  </select>
8
</form>

Efecto:

[!Resumen]

• El atributo selected se utiliza para especificar la opción predeterminada de la lista desplegable.
• El atributo disabled se utiliza para especificar si la lista desplegable está disponible.
• Puede usar el atributo size para especificar el número de opciones visibles en la lista desplegable.

Botones de envío (Submit, Reset, Button)

Los formularios generalmente necesitan un botón para enviar o confirmar la entrada del usuario. submit, reset y button son todos elementos de botones de formulario en HTML.

Ejemplo:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Botón de envío">
3
  <input type="reset" value="Botón de reinicio">
4
  <button type="button" value="Botón de confirmación">Botón de confirmación</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Botón de imagen" width="50" height="50">
6
</form>

Efecto:

[!Resumen]

• post: Se refiere al método HTTP POST. Los datos del formulario se incluirán en el cuerpo del formulario y luego se enviarán al servidor, se utiliza para enviar datos sensibles como nombre de usuario y contraseña.
• get: Valor predeterminado, se refiere al método HTTP GET. Los datos del formulario se adjuntarán a la URL del atributo action, con ? como separador, generalmente se usa para información no sensible como paginación. Por ejemplo: https://www.zhaojian.net/?page=1, aquí page=1 son los datos enviados mediante el método get.

Elementos y atributos del formulario