detalles del formulario
Uno, forma
1. La etiqueta de formulario se utiliza para crear un formulario HTML para la entrada del usuario.
2. El formulario puede contener elementos de entrada, como campos de texto, casillas de verificación, botones de opción, botones de envío, etc.
3. El formulario también puede contener menús, área de texto, conjunto de campos, leyenda y elementos de etiqueta.
4. El formulario se utiliza para transmitir datos al servidor.
Dos, atributos de forma
(A) atributo de acción
El atributo de acción especifica dónde enviar los datos del formulario cuando se envía el formulario
Valor de propiedad: dirección de enlace URL
(Dos) atributo de nombre
El atributo de nombre especifica el nombre del formulario. El atributo de nombre proporciona una forma de hacer referencia al formulario en el script.
(Tres) atributo de método
El atributo de método especifica el método HTTP (GET o POST) utilizado al enviar el formulario.
1. ¿Cuándo usar GET?
El valor predeterminado del atributo de método es GET, si el envío del formulario es pasivo (como las consultas del motor de búsqueda) y no hay información confidencial;
Al usar GET, los datos del formulario se envían a la barra de direcciones de la página.
2. ¿Cuándo usar la publicación?
Los datos que se pueden almacenar en la barra de direcciones son limitados. Si desea almacenar más datos, debe usar la publicación para almacenar datos de manera más segura.
El formulario está actualizando datos o contiene información confidencial (como contraseña), preferiblemente publicación;
La publicación es más segura, porque los datos enviados en la barra de direcciones de la página son invisibles (si carga más datos o carga imágenes, debe usar la publicación).
(Cuatro) elemento de leyenda
El elemento define la etiqueta del elemento.
Las etiquetas pueden agrupar elementos relacionados en el formulario y también pueden dibujar bordes alrededor de los elementos del formulario relacionados.<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
</fieldset>
</form>
El elemento de entrada debe agregar un atributo de nombre para definir un nombre, y el fondo recibirá los datos de entrada normalmente;
En tercer lugar, el uso de etiquetas de descripción de formulario.
<label for="wenzi">文字</label>
<input type="text" id='wenz'>
El elemento de etiqueta no presenta efectos especiales para el usuario. Sin embargo, mejora la usabilidad para los usuarios de mouse.
Si hace clic en el texto dentro del elemento de etiqueta, este control se activará, dando al control el foco. Cuando el usuario selecciona la etiqueta, el navegador cambiará automáticamente el foco al control de formulario relacionado con la etiqueta.
Para lograr el mismo efecto, habrá otra forma de escribir: los atributos for y id no son obligatorios;
<label>文字 <input type="text">
</label>
Cuatro, atributos de restricción de forma
(1) atributo obligatorio
El atributo obligatorio es un atributo booleano, que estipula que el campo de entrada debe completarse antes de enviar el formulario. (Se requiere un nuevo atributo de H5)
Nota: El atributo requerido es aplicable a los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.
(Dos) atributo de marcador de posición
El atributo de marcador de posición especifica un mensaje de solicitud corto que puede describir el valor esperado del campo de entrada (el texto de solicitud en el cuadro de entrada, el contenido no se enviará), como un valor de muestra o una descripción breve en el formato esperado.
La solicitud definida por el marcador de posición se mostrará en el campo de entrada antes de que el usuario ingrese el valor.
Nota: El atributo de marcador de posición se aplica a los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.
(Tres) atributo de valor
El atributo de valor establece el valor del elemento de entrada. Para diferentes tipos de entrada, el uso del atributo de valor es diferente.
Los tipos de tipo son botón, restablecer y enviar . Defina el texto que se muestra en el botón ;
El tipo de tipo es texto, contraseña, oculto . Defina el valor inicial (valor predeterminado ) del campo de entrada ;
El tipo de tipo es casilla de verificación, radio, imagen . Defina el valor asociado con la entrada ;
Nota: El atributo de valor debe establecerse en y.
Nota: El atributo de valor no se puede utilizar conjuntamente.
(Cuatro) atributo de longitud máxima
El atributo maxlength especifica la longitud máxima del campo de entrada, calculada como el número de caracteres.
El atributo maxlength se usa junto con o (con longitud de entrada)
(5) atributo de tamaño
El atributo de tamaño especifica el ancho visible del elemento en caracteres.
el tamaño limita la longitud del formulario (no recomendado, use CSS para configurarlo mejor)
Cinco, restricciones de acceso a formularios (formularios deshabilitados)
(1) atributo de solo lectura
El atributo readonly estipula que el campo de entrada es de solo lectura y no se puede ingresar. Puede usar el valor para establecer el valor predeterminado, que puede enviarse en segundo plano, pero el usuario no puede modificarlo.
El campo de solo lectura no se puede modificar, pero el usuario aún puede usar la tecla de tabulación para cambiar al campo y también puede seleccionar o copiar su texto.
El atributo readonly evita que los usuarios modifiquen el valor hasta que se cumplan determinadas condiciones (por ejemplo, se selecciona una casilla de verificación). Luego, debe usar JavaScript para eliminar el valor de solo lectura y cambiar el campo de entrada a un estado editable.
El atributo de solo lectura se puede utilizar con o.
(Dos) atributo deshabilitado
El atributo deshabilitado define que el elemento de entrada debe deshabilitarse (solo para ver, no para enviar al fondo)
Los elementos de entrada deshabilitados no están disponibles ni se puede hacer clic. Puede establecer el atributo deshabilitado hasta que se cumplan otras condiciones (por ejemplo, se selecciona una casilla de verificación, etc.). Luego, debe eliminar el valor deshabilitado a través de JavaScript y cambiar el valor del elemento de entrada a disponible.
Nota : El atributo deshabilitado no se puede usar juntos.
Seis tipos de extensión de campo de uso común
| valor | descripción |
|---|---|
| botón | Defina un botón en el que se pueda hacer clic (utilizado para iniciar un script a través de JavaScript en la mayoría de los casos). |
| caja | Defina la casilla de verificación. |
| archivo | Defina campos de entrada y botones de "exploración" para la carga de archivos. |
| oculto | Defina un campo de entrada oculto, aunque está oculto, todavía existe. |
| imagen | Defina la imagen como botón de envío. |
| contraseña | Defina el campo de contraseña. Los personajes de este campo están enmascarados. |
| radio | Defina botones de opción. |
| Reiniciar | Defina el botón de reinicio. El botón de reinicio borrará todos los datos del formulario. |
| enviar | Defina el botón enviar. El botón enviar enviará los datos del formulario al servidor. |
| texto | Defina un campo de entrada de una sola línea en el que el usuario pueda introducir texto. El ancho predeterminado es de 20 caracteres. |
Nueva etiqueta H5
| valor | descripción |
|---|---|
| color | Definir el selector de color |
| fecha | Definir control de fecha (incluido año, mes, día, excluyendo la hora) |
| fecha y hora | Definir controles de fecha y hora (incluidos año, mes, día, hora, minuto, segundo, fracción de segundo, según la zona horaria UTC) |
| fecha y hora local | Definir controles de fecha y hora (incluido año, mes, día, hora, minuto, segundo, fracción de segundo, sin zona horaria) |
| correo electrónico | Definir campos para la dirección de correo electrónico |
| mes | Definir controles de mes y año (sin zona horaria) |
| número | Definir campos para ingresar números |
| rango | Definir controles para ingresar números donde el valor preciso no es importante (como controles deslizantes) |
| buscar | Defina el campo de texto para ingresar la cadena de búsqueda |
| tel | Definir campos para ingresar números de teléfono |
| hora | Definir el control utilizado para ingresar la hora (sin zona horaria) |
| url | Defina el campo para ingresar la URL |
| semana | Definir controles de semana y año (sin zona horaria) |
Siete, una gran cantidad de texto y listas.
(1) Campo de texto
La etiqueta textarea define un control de entrada de texto de varias líneas
Se puede incluir una cantidad ilimitada de texto en el campo de texto, y la fuente predeterminada del texto es una fuente monoespaciada (Courier)
El valor predeterminado en el área de texto debe colocarse en un par de etiquetas de área de texto
El tamaño del área de texto se puede especificar a través de las propiedades de columnas y filas, pero una mejor manera es usar las propiedades de altura y ancho de CSS
(Dos) cuadro de lista
El elemento de selección puede crear una selección única o un menú de selección múltiple.
La etiqueta de opción se utiliza para definir las opciones disponibles en la lista, es decir, los elementos de la lista;
La etiqueta optgroup define la agrupación de elementos de la lista
1 <select>
2 <optgroup label="Swedish Cars">
3 <option value="volvo">Volvo</option>
4 <option value="saab">Saab</option>
5 </optgroup>
6 <optgroup label="German Cars">
7 <option value="mercedes">Mercedes</option>
8 <option value="audi">Audi</option>
9 </optgroup>
10 </select>
(Tres) atributos múltiples
El atributo múltiple define selecciones múltiples. El atributo múltiple se puede establecer o devolver si se pueden seleccionar varias opciones.
Uso de múltiples:
Establecer atributo múltiple
selectObject.multiple=true|false
Devuelve múltiples atributos
selectObject.multiple
8. Método de apertura estándar de la caja de opciones
(1) Tipo de radio
Botón de opción de radio, cuando el usuario hace clic en un botón de opción, el botón se seleccionará y todos los demás botones quedarán sin seleccionar.
<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" />
<br /> 女性： <input type="radio" name="Sex" value="female" />
</form>
(2) Tipo de casilla de verificación
<input type="checkbox">Se define una casilla de verificación. El usuario debe seleccionar una o varias opciones de una serie de opciones dadas, y se pueden seleccionar varias opciones al mismo tiempo.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car </form>
(Tres) atributo marcado
El atributo marcado es un atributo booleano.
El atributo marcado especifica qué elementos deben preseleccionarse cuando se carga la página.
El atributo marcado se aplica a y.
Nueve, carga de archivo
(1) Tipo de archivo
El tipo de archivo define el campo de entrada y el botón "examinar" para cargar el archivo.
(Dos) atributo enctype
El atributo enctype definido en la etiqueta del formulario especifica cómo se deben codificar los datos del formulario antes de enviarse al servidor.
De forma predeterminada, los datos del formulario se codificarán como "application/x-www-form-urlencoded".
En otras palabras, antes de enviarlo al servidor, todos los caracteres se codificarán (los espacios se convierten en "+" signos más y los símbolos especiales se convierten en valores ASCII HEX)
Valor de la propiedad:
application / x-www-form-urlencoded codifica todos los caracteres antes de enviarlos (predeterminado)
multipart / form-data no codifica caracteres. ¡Este valor debe usarse cuando se usa un formulario que contiene un control de carga de archivos!
Los espacios de texto / sin formato se convierten en "+" signos más, pero los caracteres especiales no están codificados
<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>
<input type="submit" value="提交">
</form>
(Tres) aceptar atributo
accept especifica el tipo de archivo cargado, si varios tipos se pueden separar por comas, por ejemplo: accept = "image / png, image / jpg" (esto puede cargar imágenes de tipo png)
El atributo accept solo se puede usar junto con él. Especifica los tipos de archivos que se pueden enviar mediante la carga de archivos.
Nota : evite utilizar este atributo. La carga del archivo debe verificarse en el lado del servidor .
(4) Múltiples atributos
La carga de archivos puede cargar varios archivos con múltiples atributos;
El atributo múltiple especifica que el campo de entrada puede seleccionar varios valores.
Si se utiliza este atributo, el campo puede aceptar varios valores.
Nota : El atributo múltiple usa la Champions League y los siguientes tipos: correo electrónico y archivo
10. El uso de la fecha en el formulario
(1) Tipo de fecha
fecha Obtenga la fecha, incluyendo año, mes y día.
1. Use mix y max para definir la hora de inicio y finalización, como: min = "2030-02-02"
2. También puede usar el atributo de paso para establecer el tamaño del paso (puede seleccionarlo solo después de unos días)
<input type="date" max='2030-02-02' min='2019-01-01' step='5'>
(Dos) tipo de fecha y hora
Defina controles de fecha y hora para obtener la fecha y la hora, incluido el año, mes, día, hora, minuto, segundo y fracción de segundo.
(Tres) tipo de tiempo
Obtenga la hora y defina el control utilizado para ingresar la hora (sin zona horaria).
(4) Tipo de semana
El tipo de semana obtiene el año y el número de semana
(5) Tipo de mes
el tipo de mes obtiene año y mes
(6) Tipo de fecha y hora local
fecha hora local año mes día hora minuto segundo
11. Formulario de búsqueda y lista de datos de listas de datos
(1) Tipo de búsqueda
El tipo de búsqueda puede definir el cuadro de búsqueda, pero requiere input type = search para tener un formulario con atributo de acción en la capa superior.
(Dos) etiqueta de lista de datos
La etiqueta especifica una lista de posibles opciones para el elemento.
Proporcione la función "autocompletar" para el elemento de entrada. El usuario puede ver una lista desplegable con contenido predefinido. Estos contenidos serán los datos ingresados por el usuario.
Agregue id al elemento datalist, otros elementos de entrada apuntan al id del datalist a través del atributo list, vinculando así el elemento datalist
Un par de etiquetas de opción es un texto de solicitud, si no desea tener un texto de solicitud, puede convertir la opción en una sola etiqueta
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">兼容性不好</option>> <option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Doce, los datos del historial de formularios automáticamente solicitan autocompletar
atributo de autocompletar
Hay muchos estilos y comportamientos predeterminados para type = search. El cuadro desplegable mostrará los registros de búsqueda históricos de manera predeterminada, y el efecto de visualización será diferente en diferentes navegadores o dispositivos.
El atributo de autocompletar especifica si el formulario debe habilitar el autocompletado .
Autocompletar permite que el navegador prediga la entrada al campo. Cuando el usuario comienza a escribir en el campo, el navegador muestra las opciones completadas en el campo según el historial de la entrada anterior.
Nota: Excepto Opera, otros navegadores convencionales admiten el atributo de autocompletar
Nota: autocompletar " en " se aplica a las formas , " fuera " se aplica a los campos de entrada específicos, y viceversa.
Valor de la propiedad:
No hay una línea de la historia al entrar en off , y se estipula para desactivar la función de auto-completado. El usuario debe ingresar un valor en cada campo cada vez que se usa, y el navegador no completará automáticamente la entrada
Habrá un indicador de la historia cuando se introducen en , por defecto. Especifica habilitar la finalización automática. El navegador completará automáticamente el valor en función del valor que el usuario ingresó previamente
<form action="demo-form.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>