HTML5 Custom Form_Motor Node Java College Finalización

Hay una variedad de diferentes cuadros de entrada en HTML5. y atributos.

El tipo es un texto que el elemento de entrada es un cuadro de texto de línea única, que es la manifestación predeterminada del elemento de entrada. El cuadro de entrada de texto de una sola línea admite la siguiente configuración del atributo.

El atributo MaxLength establece el número máximo de caracteres que los usuarios pueden ingresar;

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input maxlenth = 10 id = name name = name/> </p> </p> P > <Etiqueta for = city> city: <input size = 10 id = name de la ciudad = ciudad/> </p> <p> <etiqueta for = fave> frutas: <input size = 10 maxlenth = 10 10 id = nombre favorito = Fave/> </etiqueta> </p> <button type = Envir> Enviar voto </boton> </form>

Los atributos de valor pueden especificar un valor predeterminado para el cuadro de entrada;

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input placeLAYTER = su nombre id = nombre de nombre/> </p> <p> <p> <Etiqueta for = city> city: <input placeLAYTER = donde vive ID = City Name = City/> </p> <p> <etiqueta for = fave> fave> <input value = apple id = fave name = fave/ > </Etiqueta> </p> <button type = enviar> Enviar voto </botón> </form>

El efecto en Chrome es el siguiente:

Al restablecer el formulario con el elemento del botón, el navegador restaurará las indicaciones de posicionamiento y los valores predeterminados en el cuadro de texto.

El atributo de lista se puede configurar en el valor de atributo de identificación de un elemento dataList para que el usuario pueda elegir en una lista especificada por el elemento dataList. El elemento DataList se agrega recientemente en HTML5 para proporcionar un lote de valor para ayudar a los usuarios a ingresar los datos requeridos.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input placeLAYTER = su nombre id = nombre de nombre/> </p> <p> <p> <Etiqueta for = city> city: <input placeLApher = donde vive id = name de la ciudad = ciudad/> </p> <p> <etiqueta for = fave> st id = fave name = fave/> </label> < /p> <button type = enviar> Enviar voto </boton> </form> <dataList id = fruitList> <opción valor = appless etiqueta = encantador a pples/> <opción valor = oranges> naranjas refrescantes </ppection> < Valor de opción = Cerebries/> </dataList>

Cada opción en el elemento de datos representa un valor que puede ser seleccionado por un usuario.

El atributo Readonly indica que el cuadro de texto se lee solo, el atributo deshabilitado indica que no se puede editar y hay diferencias en el rendimiento de la apariencia.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discapaced id = nombre name/> </p> <p> <p> <Etiqueta for = city> city: <input value = boston readonly id = name de la ciudad = ciudad/> </p> <p> <etiqueta for = fave> fruit: <input value = Apple id = fave name = fave/> </label> </p> <button type = envíe> Enviar voto </botón> </form>

El efecto en Chrome es el siguiente:

El formulario con la propiedad deshabilitada está configurada en Gray. Box, pero no afecta el efecto de la apariencia, y el contenido se enviará al servidor.

El elemento de entrada del atributo de tipo es la contraseña se usa para ingresar la contraseña. El elemento de entrada de este atributo admite los siguientes atributos:

1) MaxLength: el número máximo de caracteres que los usuarios pueden ingresar en el cuadro de contraseña;

2) Patrón: utilizado para ingresar la expresión regular de verificación;

3) marcador de posición: indicación en el tipo de datos requerido;

4) Readonly: configure el cuadro de contraseña para leer solo;

5) Requerido: el usuario debe ingresar un valor, de lo contrario no puede pasar la verificación de entrada;

6) Tamaño: Establezca su ancho a través del número de caracteres visibles en el cuadro de contraseña especificado;

7) Valor: Establezca el valor de contraseña inicial.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ </label> </p> <button type = envíe> Enviar voto </botón> </form>

Los caracteres ingresados ​​por el usuario se muestran como*en el cuadro de contraseña, pero debe tenerse en cuenta que al enviar el formulario, el servidor recibe una contraseña de texo transparente. Considere usar SSL/HTTPS en el navegador y el contenido de comunicación entre el servidor está encriptado.

La propiedad Tipo está configurada para enviar, reiniciar y botón para generar un elemento de botón como botón.

1) Enviar: Genere el botón para enviar formularios, Atributos de soporte: FormAction, FormencType, FormMethod, FormTarget y FormNoValiding.

2) Restablecer: Genere el botón de la forma fija;

3) Botón: Genere botones ordinarios sin ninguna operación.

El texto de descripción del botón en 3 se especifica a través del atributo de valor.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ </Etiqueta> </p> <input type = enviar value = enviar votación/> <input type = reset value = resype = b utton value = my button/> </form>

El efecto en Chrome es el siguiente:

La diferencia entre la generación del botón y el uso del elemento del botón con el elemento Anput es que este último se puede usar para mostrar el texto que contiene texto. Sin embargo, debido a que cada navegador tiene el mismo método de procesamiento de elementos de entrada, y algunos navegadores más antiguos (como IE6) no pueden manejar correctamente el elemento del botón, muchos sitios web están más inclinados a usar elementos de entrada.

El elemento de entrada del atributo de tipo solo acepta el valor. Los atributos de soporte incluyen:

1) Lista: Especifique el elemento DataList que proporciona el valor recomendado en el cuadro de texto, y su valor es el valor de identificación del elemento DataList;

2) min: establecer el valor mínimo;

3) Max: Establezca el valor máximo;

4) Readonly: solo leer;

5) Requerido: significa que el usuario debe ingresar un valor;

6) Paso: el paso de ajustar el valor hacia arriba y hacia abajo;

7) Valor: el valor inicial del elemento especificado.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ > </Etiqueta> </p> <p> <etiqueta for = precio> $ por unidad en su área: <input type = number step = 1 min = 0 max = 100 valor = 1 id = precio name = precio/> </Etiqueta> </p> <input type = enviar value = enviar voto/> </form>

El efecto en Chrome es el siguiente:

Usando el elemento de entrada con el atributo de tipo a la gama, los usuarios solo pueden usarlo para seleccionar un valor numérico dentro del alcance especificado primero.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ </label> </p> <p> <etiqueta for = precio> $ por unidad en su área: 1 <input type = range step = 1 min = 0 max = 100 value = 1 id = precio name = precio/100 </etiqueta> </p> <input type = enviar value = enviar voto/> </form>

El efecto en Chrome es el siguiente:

El atributo de tipo es la casilla de verificación para representar la casilla de verificación.

1) Verificación: si elegir de forma predeterminada;

2) requerido: indica que el usuario debe verificar la casilla de verificación;

3) Valor: Establezca el valor de datos enviado al servidor, predeterminado.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ </label> </p> <p> <etiqueta for = veggie> ¿eres vegetariano: <input type = checkbox id = veggie = veggie/> veg a itartary </selabel> </p> <input type = shipt value = Envíe el voto/> </form>

El efecto en Chrome es el siguiente:

Tenga en cuenta que al usar la casilla de verificación, la casilla de verificación se envía al servidor solo cuando se envía la casilla de verificación.

El elemento de entrada del atributo de tipo se puede usar para generar un conjunto de botones de elección única. Cada radio representa una opción, y el mismo grupo de radio usa el mismo nombre. El grupo de botones de selección única es adecuado para escenas con menos opciones.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/> </p> <p> d> Vote por su fruta favorita </legend> <etiqueta para = manzanas> <input type = Radio Check Value = Apple ID = Apple Name = Fave/> Apple </etiqueta> <etiqueta for = naranja> <input type = radio valor = oranges id = naranja name = fave/> naranja </etiqueta> <etiqueta for = cerezas > <input type = Radio Value = CHERRIES ID = CHERRIES NAME = FAVE/> </label> </fieldset> </p> <input type = subt value = enviar votación/> </form>

El efecto en Chrome es el siguiente:

Escriba el valor de los atributos El correo electrónico, la TEL y la URL corresponden a la dirección de correo electrónico, el número de teléfono y la URL, respectivamente.

1) Lista: Especifique el elemento DataList que proporciona el valor recomendado en el cuadro de texto, y su valor es el valor de identificación del elemento DataList;

2) MaxLength: el número máximo de caracteres de entrada;

3) Patrón: especifique la expresión regular para verificar la entrada;

4) marcador de posición: especifique un mensaje en el tipo de datos requerido;

5) Readonly: lea el cuadro de texto y solo lea;

6) requerido: indica que el usuario debe ingresar un valor;

7) Tamaño: número visible de caracteres;

8) Valor: el valor inicial del elemento especificado.

El correo electrónico también admite múltiples atributos, lo que indica que se pueden aceptar múltiples direcciones de correo electrónico.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = contraseña> contraseña: <input type = Password PlaceHolder = Min 6 caracteres = contraseña name = contraseña/> </p> <p> <etiqueta = correo electrónico = correo electrónico> correo electrónico: <input type = correo electrónico [email protected] Id = nombre de correo electrónico = correo electrónico/> </p> <p> <p> <etiqueta for = tel> tel: <input type = Tel PlaceHolder = (xxx) -xxx- xxxx id = tel name = tel/> <//// Etiqueta> </p> <p> <etiqueta for = url> su página de inicio: <input type = url id = url name = url/> </p> <input type = shit value = enviar voto/> </form>

El efecto en Chrome es el siguiente:

Se agregan algunos tipos de fecha y hora de entrada a HTML5, que incluyen:

1) DateTime: Obtenga la fecha y hora del mundo, incluida la información de la zona horaria;

2) DateTime-Local: Obtenga la fecha y hora locales, no incluye información de zona horaria;

3) Fecha: Obtenga la fecha local, sin información de tiempo y zona horaria;

4) Mes: Obtenga la información anual y mensual, sin información de día, hora y zona horaria;

5) Tiempo: Obtenga tiempo;

6) Semana: Obtenga la semana actual.

Los atributos adicionales compatibles con el elemento de entrada de fecha y hora incluyen:

1) Lista: Especifique el elemento DataList que proporciona el valor recomendado en el cuadro de texto, y su valor es el valor de identificación del elemento DataList;

2) min: establecer el valor mínimo;

3) Max: Establezca el valor máximo;

4) Readonly: solo leer;

5) Requerido: el usuario debe ingresar un valor, de lo contrario no puede pasar la verificación de entrada;

6) Paso: el paso de ajustar el valor hacia arriba y hacia abajo;

7) Valor: el valor inicial del elemento especificado.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ > </elabel> </p> <p> <etiqueta for = LastBuy> ¿Cuándo fue la última vez que compró: <input type = date id = LastBuy name = LastBuy/> </Label> </P> <Input type = enviar? valor = enviar votación/> </form>

El efecto en Chrome es el siguiente:

En la actualidad, el cuadro de entrada de fecha y hora no está bien admitido en la mayoría de los navegadores.

El atributo de tipo es el selectador de color, y el valor de color se representa en el formato de 7 caracteres: comenzando con#, y los siguientes tres dos dieciséis avances, que representan los valores de los tres colores primarios de rojo, verde y azul , como el valor del rojo, el verde y el azul, como los valores de los tres colores primarios de rojo, verde y azul, como #FF1234.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <etiqueta for = name> name: <input value = adam discaped = Contraseña> contraseña: <input type = Password PlaceHolder = min 6 caracteres = contraseña name = contraseña/</p> <p> <p> <label = fave> fruit: <input value = Apples id = fave name = fave/ </Etiqueta> </p> <p> <etiqueta for = color> color: <input type = color name = color/> </p> </p. /Forma>

El efecto en Chrome es el siguiente:

Tenga en cuenta que la mayoría de los navegadores no han proporcionado un soporte especial para este elemento de entrada.

El elemento de entrada de tipo oculto se puede usar para ocultar un elemento de datos y enviarlo al servidor al enviar el formulario (generalmente para usar esta función).

 <Form Method = Post Action = http: // titan: 8080/form> <input type = Hidden name = RecordID value = 1234/<p> <etiqueta for = name> nombre: <input value = adam discapaced id = nombre name = nombre = name/> </selabel> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de posicionista = min 6 carales id = contraseña = contraseña/> </b El> </p> << p> <p> <etiqueta for = fave> frutas: <input value = Apples id = fave name = fave/> </p> </p> <input type = subt value = enviar votación/> </form>

El botón generado por el elemento de entrada de tipo de imagen se muestra como un icono, y el formulario se envía después de hacer clic. Los atributos de soporte incluyen:

1) ALT: proporcionar texto de explicación de elementos, que es útil para los usuarios que necesitan usar la tecnología de asistencia para discapacitados;

2) Formacción: el mismo elemento de botón;

3) FormeEnCtype: mismo elemento de botón;

4) FormMethod: mismo elemento de botón;

5) FormTarget: mismo elemento de botón;

6) FormNoVoididing: mismo elemento de botón;

7) Altura: establezca la altura de las imágenes en píxeles;

8) Src: especifique la URL de la imagen que se mostrará;

9) Ancho: establezca el ancho de la imagen en el píxel;

 <Form Method = Post Action = http: // titan: 8080/form> <input type = Hidden name = RecordID value = 1234/<p> <etiqueta for = name> nombre: <input value = adam discapaced id = nombre name = nombre = name/> </selabel> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de posicionista = min 6 carales id = contraseña = contraseña/> </b El> </p> << P> <p> <etiqueta for = fave> frutas: <input value = Apples id = fave name = fave/> </p> </p> <input type = image src = aceptación.png name = envit/> < /Forma "

Haga clic en el botón de imagen para enviar el formulario.

El elemento de entrada de tipo archivo se usa para cargar archivos, y el archivo se puede cargar en el servidor al enviar el formulario. Los atributos de soporte incluyen:

1) Aceptar: especifique el tipo de aceptación. Definición de tipo MIME, consulte RFC 2046 (http://tools.ies.org/html/rfc2046);

2) Múltiple: configure este atributo para cargar varios archivos al mismo tiempo;

3) Requerido: el usuario debe ingresar un valor.

 <Form Method = Post Action = http: // titan: 8080/form de formación = multipart/form-data> <p> <etiqueta for = name> name: <input value = adam discapaced id = name na me = name/> </etiqueta> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de plantas = min 6 caracteres = contraseña name = contraseña/> </p> <p> <lab la for = fave> Fruit: <input value = Apples id = fave name = fave/> </p> <p> <input type = file name = fileData/> </p> <input type = shit value = enviar voto/> </formulario >

Tenga en cuenta que el tipo de código de formulario se puede cargar cuando se puede cargar los datos multipart/formulario. El efecto en Chrome es el siguiente:

El elemento Selet se utiliza para generar una lista de opciones, que es más compacta que el elemento de entrada de tipo RadioiiOButton y más adecuado para la situación con más opciones. El atributo compatible con este elemento incluye:

1) Nombre: el nombre de la lista;

2) deshabilitado: deshabilite la lista de caída;

3) Forma: una o más formas pertenecientes al área de texto;

4) Autococus: el área de texto obtiene automáticamente el enfoque después de cargar la página;

5) requerido: debe llenarse;

6) Tamaño: el número de opciones se puede ver en la lista de caída;

7) Múltiple: puede elegir varias opciones.

El elemento de selección predeterminado es una sola lista de caída de selección

 <Form Method = Post Action = http: // titan: 8080/form de formación = multipart/form-data> <p> <etiqueta for = name> name: <input value = adam discapaced id = name na me = name/> </etiqueta> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de plantas = min 6 caracteres = contraseña name = contraseña/> </p> <p> <lab la for = fave> Fruta favorita: <select id = fave name = fave> <opción valu = manzanas seleccionadas etiqueta = manzanas> manzanas </opción> <opción valor = naranja = naranja> oranges </opción> <opción valor = cerezas etiquetas = cerezas> cerezas </opción> <opción valor = peras etiquetas = peras> peras> </opción> </select> </p> <input type = enviar value = enviar voto/> m>

El efecto en Chrome es el siguiente:

Después de configurar atributos de tamaño y múltiples atributos para la lista, se convierte en una casilla de verificación.

 <Form Method = Post Action = http: // titan: 8080/form de formación = multipart/form-data> <p> <etiqueta for = name> name: <input value = adam discapaced id = name na me = name/> </etiqueta> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de plantas = min 6 caracteres = contraseña name = contraseña/> </p> <p> <lab la for = fave> Fruta favorita: <select id = fave name = fave size = 5 múltiple> <opción valor = manzana selectd etiqueta = manzanas> manzanas </opción> <pection> es etiqueta = naranja> naranja </opción> <opción valu = la etiqueta de cerezas = Cerezas> cerezas </opción> <opción valor = peras etiquetas = peras> peras </opción> </select> </p> <input type = enviar value = enviar votación/> </form>

Presione la tecla CTRL cuando haga clic en la opción para seleccionar varias opciones. El efecto en Chrome es el siguiente:

Los elementos Optroup se pueden usar para establecer una determinada estructura en el contenido del elemento seleccionado.

1) Etiqueta: se utiliza para proporcionar un pequeño título para todo el conjunto de opciones;

2) Desactivado: cualquier opción en el grupo del grupo.

 <Form Method = Post Action = http: // titan: 8080/form de formación = multipart/form-data> <p> <etiqueta for = name> name: <input value = adam discapaced id = name na me = name/> </etiqueta> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de plantas = min 6 caracteres = contraseña name = contraseña/> </p> <p> <lab la for = fave> Fruta favorita: <select id = fave name = fave> <optgroup etiqueta = opciones top> <opción valu = manzanas seleccionadas etiqueta = manzanas> manzanas </opción> ion valu = oranges etiqueta = oranges> naranja </opción> </optgroup > <optGroup Label = otros> <opción valu = CHERRIES LABET = CERRIES> CERRIAS </opción> <opción valor = peras etiquetas = peras> peras </ppection> tgroup> </select> </selabel> </p> < type de entrada = enviar value = enviar voto/> </form>

El efecto en Chrome es el siguiente:

Los elementos de Optroup solo juegan un papel organizacional, y los usuarios no pueden elegirlo como una opción.

El elemento TextAREA genera cuadros de texto de línea múltiple, y los usuarios pueden ingresar texto de línea múltiple en él. La inclusión de los atributos incluyen:

1) Autococus: el área de texto obtiene automáticamente el enfoque después de cargar la página;

2) cols: ancho visible, entero;

3) Desactivado: deshabilite esta área de texto;

4) Forma: una o más formas pertenecientes al área de texto;

5) MaxLength: el número máximo de caracteres en el área de texto;

6) Nombre: el nombre del área de texto;

7) marcador de posición: un breve recordatorio del valor esperado del área de texto;

8) Readonly: el área de texto solo se lee;

9) Requerido: el área de texto es necesaria;

10) Filas: el número de líneas visibles en el área de texto, entero;

11) Envolver: cómo cambiar el texto en el área de texto, que incluye: Soft (predeterminado).

 <Form Method = Post Action = http: // titan: 8080/form de formación = multipart/form-data> <p> <etiqueta for = name> name: <input value = adam discapaced id = name na me = name/> </etiqueta> </p> <p> <etiqueta for = contraseña> contraseña: <input type = contraseña de plantas = min 6 caracteres = contraseña name = contraseña/> </p> <p> <lab la for = fave> Fruta favorita: <select id = fave name = fave> <optgroup etiqueta = opciones top> <opción valu = manzanas seleccionadas etiqueta = manzanas> manzanas </opción> ion valu = oranges etiqueta = oranges> naranja </opción> </optgroup > <optGroup Label = otros> <opción valu = CHERRIES LABET = CERRIES> CERRIAS </opción> <opción valor = peras etiquetas = peras> peras </ppection> tgroup> </select> </selabel> </p> < p> <textarea cols = 20 filas = 5 wrap = hard id = story name = story> Cuéntanos por qué este es su favorit </xtexarea> </p> <input type = enviar VA lue = enviar voto/> </formar >

El efecto en Chrome es el siguiente:

El elemento de salida representa el resultado del cálculo. Los atributos de soporte incluyen:

1) Para: uno o más elementos relacionados con el dominio de salida, separados en el espacio medio;

2) Formulario: una o más formas del campo de entrada;

3) Nombre: el único nombre del objeto (utilizado cuando se envía el formulario).

 <Form OnSubMit = return False Onput = Res.Value = Quant.ValueasNumber * Price.ValueAsNumber> <FieldSet> <Legend> Calculadora de precios </Legend> T Type = Number PlaceHolder = Cantidad ID = Quant Name = Quant/> <Input Type = = Número de posicionador = precio id = precio name = precio/> = <outputy for = cuant name = res/> </form>

El sistema de tiempo de JavaScript se usa para generar una calculadora simple.

Lo anterior es todo el contenido de este artículo.