De hecho, las características de forma de HTML5 se introdujeron en las características, consejos y técnicas de HTML5 del Artículo 28 que debe conocer el año pasado. Sin embargo, es un poco lamentable que la introducción de esta parte se muestre en forma de video. De hecho, está bien si es un video. La clave es el video de Toutube, que debe ser jailbreaked para ver. Bueno, un buen ciudadano como yo que es solo una persona escrupulosa es demasiado vago para ser engañado en otras situaciones, excepto la azafata, por lo que el contenido que se muestra en esta parte del video está realmente vacío.
Entonces, aquí hay un parche para mejorar esta parte del contenido. El contenido general de este artículo es:
# <input type = number />
# <input type = range />
# <input type = date /> y otros controles selectores de tiempo
# <input type = color /> selector de color
# <input type = search />
# <shalist> Elemento y atributo de lista
# La relación ambigua entre la verificación de forma HTML5 y CSS3
El elemento de formulario HTML con type = número le permite cambiar el valor en el cuadro de texto presionando una tecla. Este efecto a menudo se ve en los sistemas de Windows, como:
La gente perezosa preferiría acostar en una silla y hacer clic en el mouse que sentarse y presionar el teclado. Por lo tanto, en comparación con la entrada del teclado, también hay un mercado para hacer clic e entrada. Es por eso que hay controles de selección numérica en formularios HTML5.
El código HTML áspero es el siguiente:
Número de personas: <input type = number value = 1 />
Si agrega un límite de ancho adecuado para los puntos, el efecto en Chrome (UI estimado está relacionado con temas del sistema) es el siguiente:
El navegador que actualmente es compatible es Opera 11, pero los botones que suman y restan los valores en Opera se ven un poco torcidos y tienen un estilo abstracto.
Puede hacer clic aquí duro: HTML5 Forma Nubmer Control Demo
2. Tipo = RangoRango de valor de significado chino Rango, y este tipo de efecto también es común en el sistema de ventanas, como se muestra en la siguiente captura de pantalla:
Hay un control de entrada con efectos similares en HTML5. Simplemente defina su tipo como rango, ¡tan fácil!
Rango de arrastre: <input type = rango value = 50 />
Por defecto, el rango de valor es 0 ~ 100, por lo que si el valor = 50, la barra de arrastre está en el medio del rango de área. Como se muestra en la figura a continuación:
Mi Firefox es actualmente la versión 3.6 y esta característica aún no es compatible. Sin embargo, Chrome, Opera y Safari 4 tienen efectos, pero después de todo no son el mismo padre, por lo que hay algunas diferencias en la apariencia, por lo que estas diferencias no se mostrarán aquí.
Puede hacer clic aquí duro: demostración de control de rango de formulario HTML5
El último elemento de las 28 características, trucos y técnicas HTML5 mencionadas al principio, es decir, el excelente ejemplo de efecto del elemento 28 es el efecto implementado en el control de rango, que también implica los atributos MIN, MAX y los atributos de paso. Es un ejemplo que vale la pena observar y aprender. Con respecto a esta demostración de ejemplo, puede hacer clic aquí con dureza.
3. Tipo = fecha y otros controles de tiempoEste es el control del selector de tiempo. Si elige mucho tiempo, no se moleste con ningún complemento JS. Solo tenga un atributo de cita, y luego puede comunicarse con la anciana que barrió el piso a su lado mientras café. Si no lo crees, mira:
Seleccione Fecha: <Input type = date value = 2011-01-04 />
Como resultado, bajo los navegadores compatibles, como la ópera, los siguientes efectos están disponibles:
¡Este es un selector de tiempo que no está vivo!
Aparte de su fea apariencia, los otros son bastante deliciosos.
Espacio de clase de tiempo, no solo el tipo de fecha, sino también el tipo de tiempo, sino también de fecha y hora, semana y mes.
Obviamente, como lo indica el nombre, el tipo de fecha es seleccionar la fecha, el tipo de tiempo es seleccionar la hora, la hora de fecha es seleccionar la fecha y la hora, y la semana es seleccionar Semana, y el mes se realiza para seleccionar el mes.
Puede hacer clic aquí duro: HTML5 Demostración de espacio de clase de tiempo
Lo probé y acabo de actualizar Safari a la versión 5.0. Descubrí que en la actualidad, el navegador Opera admite este tipo de control de tiempo. Los efectos son los siguientes:
Cuando Tipo = Tiempo, el efecto es algo similar al Tipo = Número. Puede cambiar de eventos haciendo clic. Por defecto, cada punto es una vez, el tiempo se cambia durante 1 minuto y el mouse está presionado por mucho tiempo y el mouse también es válido.
Seleccione Tiempo: <Input type = Time Value = 22: 52 />
Seleccionar tiempo:
Bajo tipo = semana, cuando el mouse pasa, el color de fondo de la fecha de cada línea (representa una semana) se volverá más oscuro colectivamente, como se muestra en la figura a continuación:
Cuando tipo = mes, el color de fondo de todo el mes se vuelve más oscuro, como se muestra en la figura a continuación:
Los valores de datos después de seleccionar los dos son los siguientes:
4. Tipo = colorEste es un control selector de color, que es bastante poderoso. Es muy simple de usar, como sigue:
Seleccione Color: <Input type = color valor =#34538b />
El efecto predeterminado en el navegador Opera es el siguiente:
El control de entrada predeterminado tiene un fondo de color redondo con #34538b. Hacemos clic para bajar, y el resultado es, borrar y expandir el panel de color web:
Haga clic en el botón de abajo con otras ... palabras, y como resultado, se expandió el hermoso panel de selección de color:
Es genial, es muy fácil de usar, oh jeje.
Puede hacer clic aquí duro: html5 formulario de control de selección de color de color
5. Tipo = BuscarEs la función de búsqueda. Recuerdo cuando vi que el cuadro de entrada de tipo de búsqueda tendría automáticamente un icono de lupa de búsqueda. Sin embargo, no vi esta prueba (¿está en un sueño), y el efecto UI de este atributo es muy discreto y frío? En el navegador Core WebKit, cuando hay un valor, habrá una cruz sexy después del cuadro de entrada, como se muestra a continuación:
No encontré nada especial en nada más, así que acabo de mencionar este. Puede hacer clic aquí duro: Demostración de control de tipo de búsqueda HTML5
6. Atributo de elemento y lista de elementos <scalista>El dataList es un elemento muy raro que implementa el efecto desplegable de la lista de datos, y el estilo de la interfaz de usuario es un poco similar al autocompleto.
Para dar un ejemplo simple:
El siguiente código HTML:
Lista: <input type = text list = myData PlaceLePhander = Popular Movie Rankings/> <DataList id = myData> <opción etiqueta = top1 value = Let The Bullets Fly> <opción etiqueta = top2 value = si usted es el 2> <opción etiqueta = top3 value = rish jianghu> <option etiqueta = top4 value = orphan de zhao> <option etiqueta = top5 value = la pequeña cosa de risa
El resultado es el siguiente después de que el cuadro de entrada se enfoque:
Esto, este atributo es algo bueno. No camine y descubra que solo tiene efectos en el último navegador de ópera. Se desconoce si otros navegadores lo apoyarán en el futuro.
Con HTML5, algunas pseudo-clases nuevas también han aparecido en la parte selectora de CSS3, como:
Por ejemplo, los siguientes códigos CSS y HTML:
entrada [type = text]: foco: válido, input [type = correo electrónico]: foco: válido, input [type = number]: foco: en rango {outline: 2px green solid; } Entrada [type = text]: Focus: Invalid, input [type = email]: Focus: Invalid, input [type = number]: Focus: Out-Range {Outline: 2px Red Solid; }<p> Cuadro de entrada normal: <input type = text /> </p> <p> Cadera de entrada de correo: <Input type = Correo electrónico /> </p> <p> Cuadro de entrada numérica: <type de entrada = número min = 0 max = 10 /> (0 ~ 10) </p>
Tome el cuadro de entrada de correo como ejemplo. Cuando el texto de entrada no es un buzón legal, el esquema del cuadro de entrada mostrará un borde de advertencia roja:
Con el aporte de los caracteres, cuando el buzón es legal, el borde rojo se cepillará en un borde verde seguro:
El trabajo de verificación, así como la pantalla de estilo relacionado, etc., están completados por el navegador y el CSS. Lo pensé 10 años después, wow, esa es la web, todo es tan hermoso.
Algunas otras características de los formularios HTML5, como requeridos, enfoque automático, marcador de posición, patrón, etc., se han mostrado y explicado en las 28 características, consejos y técnicas HTML5 que debe conocer, por lo que no entraré en detalles aquí.
Si está interesado en HTML5, personalmente le recomiendo leer el artículo anterior sobre 28 cosas. Se puede decir que el contenido de este artículo es una mejora adicional y suplemento hasta cierto punto (otras nuevas características de los formularios HTML5). El primero es un gran problema, y este artículo es, en el mejor de los casos, una salsa de soja de alto nivel.
Finalmente, dado que todas las cosas HTML5, si el navegador que está tratando de hacer ahora es, es decir, incluso si deja que su navegador vuele por un tiempo, no verá estos efectos llamativos. Por lo tanto, se recomienda pasar a la última versión de los navegadores modernos.
Artículo de referencia:Nuevas funciones de formulario en html5: http://dev.opera.com/articles/view/new-form-fature-in-html5/