De fato, as características do formulário do HTML5 foram introduzidas nos recursos, dicas e técnicas do Artigo 28 HTML5 que você deve conhecer no ano passado. No entanto, é um pouco lamentável que a introdução desta parte seja exibida na forma de um vídeo. Na verdade, tudo bem se for um vídeo. A chave é o vídeo do Toutube, que precisa ser jailbido para assistir. Bem, um bom cidadão como eu, que é apenas uma pessoa escrupulosa, é preguiçoso demais para ser enganado em outras situações, exceto para a comissária de bordo, então o conteúdo exibido nesta parte do vídeo está realmente vazio.
Então, aqui está um patch para melhorar essa parte do conteúdo. O conteúdo geral deste artigo é:
# <tipo de entrada = número />
# <tipo de entrada = intervalo />
# <Tipo de entrada = Date /> e outros controles de seletor de tempo
# <tipo de entrada = cor /> seletor de cor
# <tipo de entrada = pesquisa />
# <datalist> elemento e atributo de lista
# A relação ambígua entre html5 verificação e css3
O elemento de formulário HTML com tipo = número permite alterar o valor na caixa de texto pressionando uma tecla. Esse efeito é frequentemente visto nos sistemas Windows, como:
Pessoas preguiçosas preferem deitar em uma cadeira e clicar no mouse do que sentar e pressionar o teclado. Portanto, em comparação com a entrada do teclado, também há um mercado para clicar e entrada. É por isso que existem controles de seleção numéricos nos formulários HTML5.
O código HTML aproximado é o seguinte:
Número de pessoas: <Tipo de entrada = Valor número = 1 />
Se você adicionar um limite de largura adequado para pontos, o efeito no Chrome (a interface do usuário estimada está relacionada aos temas do sistema) é o seguinte:
O navegador atualmente suportado é o Opera 11, mas os botões que adicionam e subtraem os valores da Opera parecem um pouco tortos e têm um estilo abstrato.
Você pode clicar aqui com força: html5 formulário nubmer Control Demo
2. Tipo = intervaloIntervalo de significado chinês, e esse tipo de efeito também é comum no sistema de janelas, como mostrado na captura de tela a seguir:
Há um controle de entrada com efeitos semelhantes no HTML5. Basta definir seu tipo como alcance, tão fácil!
Faixa de arrasto: <Tipo de entrada = Valor da faixa = 50 />
Por padrão, o intervalo de valor é de 0 ~ 100; portanto, se valor = 50, a barra de arrasto estará no meio da faixa de área. Como mostrado na figura abaixo:
Meu Firefox está atualmente na versão 3.6 e esse recurso ainda não foi suportado. No entanto, o Chrome, Opera e Safari 4 têm efeitos, mas não são o mesmo pai, portanto, existem algumas diferenças na aparência; portanto, essas diferenças não serão mostradas aqui.
Você pode clicar aqui com força: HTML5 Formulário Demoção de Controle de Formulário
O último item dos 28 recursos, truques e técnicas HTML5 mencionados no início, ou seja, o excelente exemplo de efeito do 28º item é o efeito implementado no controle do intervalo, que também envolve os atributos MIN, Max e atributos de etapa. É um exemplo que vale a pena observar e aprender. Em relação a esta demonstração de exemplo, você pode clicar aqui com severidade.
3. Tipo = Data e outros controles horáriosEste é o controle do seletor de tempo. Se você escolher muito tempo, não se preocupe com nenhum plug-in JS. Basta ter um atributo de data e você pode se comunicar com a velha senhora que varreu o chão ao seu lado durante o café. Se você não acredita, olha:
Selecione Data: <Tipo de entrada = Valor da data = 2011-01-04 />
Como resultado, sob navegadores suportados, como o Opera, os seguintes efeitos estão disponíveis:
Este é um seletor de tempo que não está vivo!
Além de sua aparência feia, os outros são bastante deliciosos.
Espaço de aula de tempo, não apenas o tipo de data, mas também o tipo de tempo, mas também o DateTime, a semana e o mês.
Obviamente, como o nome indica, o tipo de data é para selecionar a data, o tipo de hora é selecionar o horário, o tempo do dateTime é selecionar a data e a hora e a semana é selecionar a semana e o mês percebe para selecionar o mês.
Você pode clicar aqui com força: html5 formulário de tempo de aula de demonstração de espaço
Eu testei e apenas atualizei o Safari para a versão 5.0. Descobri que, atualmente, o Opera Browser suporta esse tipo de controle de tempo. Os efeitos são os seguintes:
Quando tipo = tempo, o efeito é um pouco semelhante ao tipo = número. Você pode mudar de eventos clicando. Por padrão, todo ponto é uma vez, o tempo é alterado por 1 minuto e o mouse é pressionado há muito tempo e o mouse também é válido.
Selecione Hora: <Tipo de entrada = Valor do tempo = 22: 52 />
Selecione Hora:
Em Type = semana, quando o mouse passar, a cor de fundo da data de cada linha (representa por semana) ficará mais escura coletivamente, como mostrado na figura abaixo:
Quando tipo = mês, a cor de fundo de todo o mês se torna mais escura, como mostrado na figura abaixo:
Os valores dos dados após selecionar os dois são os seguintes:
4. Tipo = corEste é um controle de seletor de cores, que é bastante poderoso. É muito simples de usar, como segue:
Selecione Cor: <Tipo de entrada = Valor da cor =#34538b />
O efeito padrão no navegador de ópera é o seguinte:
O controle de entrada padrão possui um fundo de cores redondo com #34538b. Clicamos para desistir, e o resultado é, limpe e expandem o painel de cores da web:
Clique no botão abaixo com outras ... palavras e, como resultado, o lindo painel de seleção de cores foi expandido:
É legal, é muito fácil de usar, oh hehe.
Você pode clicar aqui com força: html5 formar uma demonstração de controle de cor de cor de cor
5. Tipo = PesquisaÉ a função de pesquisa. Lembro -me de quando vi que a caixa de entrada do tipo de pesquisa teria automaticamente um ícone de vidro de lupa de pesquisa. No entanto, eu não vi esse teste (está em um sonho), e o efeito da interface do usuário desse atributo é muito discreto e frio. No navegador Webkit Core, quando houver um valor, haverá uma cruz sexy após a caixa de entrada, como mostrado abaixo:
Não encontrei nada de especial em mais nada, então mencionei este. Você pode clicar aqui Hard: HTML5 Pesquisa Demoção Control
6. <datalist> elemento e atributo de listaO Datalist é um elemento muito raro que implementa o efeito de retirada da lista de dados, e o estilo da interface do usuário é um pouco semelhante ao preenchimento automático.
Para dar um exemplo simples:
O seguinte código HTML:
Lista: <Tipo de entrada = Lista de texto = MyData SPAREHORDER = RANKINGS POPULAR FILME/> <DATALIST ID = MyData> <Option Label = Top1 Valor1 = Deixe as balas voarem> <Opção Rótulo = Top2 Value = Se você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é o que você é, se você é o que você é o que é o que você é o que você é o que você é, se você é o que você é o que você é o que você tem.
O resultado é o seguinte depois que a caixa de entrada obtém o foco:
Essa coisa, esse atributo é uma coisa boa. Não ande e descubra que ele tem apenas efeitos no último navegador de ópera. Não se sabe se outros navegadores o apoiarão no futuro.
Com o HTML5, alguns novos pseudo-classes também apareceram na parte seletora do CSS3, como:
Por exemplo, os seguintes códigos CSS e HTML:
Input [TIPO = TEXT]: Foco: Válido, Input [Type = Email]: Focus: Valid, Input [Type = Número]: Foco: IN-RANGE {Esboço: 2px verde sólido; } input [type = text]: foco: inválido, entrada [type = email]: foco: inválido, entrada [type = número]: foco: fora do alcance {esboço: 2px vermelho sólido; }<p> Caixa de entrada normal: <Tipo de entrada = Texto /> </p> <p> Caixa de entrada de correio: <Tipo de entrada = email /> </p> <p> Caixa de entrada numérica: <Tipo de entrada = número min = 0 max = 10 /> (0 ~ 10) </p>
Pegue a caixa de entrada de e -mail como exemplo. Quando o texto de entrada não é uma caixa de correio legal, o esboço da caixa de entrada exibirá uma fronteira vermelha de aviso:
Com a entrada de caracteres, quando a caixa de correio é legal, o vermelho da borda será escovado em uma borda verde segura:
O trabalho de verificação, bem como a exibição de estilo relacionado, etc., todos são concluídos pelo navegador e CSS. Pensei nisso 10 anos depois, uau, essa é a web, tudo é tão lindo.
Alguns outros recursos dos formulários HTML5, como necessários, foco automático, espaço reservado, padrão etc., foram mostrados e explicados nos 28 recursos, dicas e técnicas HTML5, para que não entre em detalhes aqui.
Se você estiver interessado em HTML5, eu pessoalmente recomendo ler o artigo anterior sobre 28 coisas. Pode -se dizer que o conteúdo deste artigo é uma melhoria e suplemento adicional a um determinado ponto (outros novos recursos dos formulários HTML5). O primeiro é um grande negócio, e este artigo é, na melhor das hipóteses, um molho de soja de alto nível.
Finalmente, como é tudo o HTML5, se o navegador você está tentando fazer agora é, mesmo que você deixe seu navegador voar por um tempo, não verá esses efeitos atraentes. Portanto, é recomendável passar para a versão mais recente dos navegadores modernos.
Artigo de referência:Novo formulário Recursos em html5: http://dev.opera.com/articles/view/new-form-features-in-html5/