HTML5 Form_Motor Node Java College acabamento da faculdade

Há uma variedade de caixas de entrada e botões diferentes no HTML5. e atributos.

Tipo é um texto que o elemento de entrada é uma caixa de texto de linha única, que é a manifestação padrão do elemento de entrada. A caixa de entrada de texto de linha única suporta as seguintes configurações de atributo.

O atributo MaxLength define o número máximo de caracteres que os usuários podem inserir;

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = nome> Nome: <input maxlenth = 10 id = nome name = nome/> </p> </p> p > <Label for = City> City: <Tamanho da entrada = 10 id = Nome da cidade = Cidade/> </p> <p> <Rótulo para = Favor de Fruto: <Tamanho da entrada = 10 maxlenth = 10 10 id = nome favorito = Favor/> </belt> </p> <Button type = submeter> Enviar voto </butut> </morm>

Os atributos de valor podem especificar um valor padrão para a caixa de entrada;

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Entrada de espaço reservado = seu nome ID = Nome do nome/> </p> <p> <p> <Label for = City> City: <Entrada de espaço reservado = onde você vive id = Nome da cidade = City/> </p> <p> <Label for = Fave> Fave> <Valor de entrada = Apple ID = Nome Fave = Fave/ > </belt> </p> <button type = submit> submeter voto </butut> </morm>

O efeito no Chrome é o seguinte:

Ao redefinir o formulário com elemento do botão, o navegador restaurará os prompts de posicionamento e os valores padrão na caixa de texto.

O atributo da lista pode ser definido como o valor do atributo de ID de um elemento de dados de dados para que o usuário possa escolher em uma lista especificada pelo elemento de dados. O elemento Datalist é adicionado recentemente no HTML5 para fornecer um lote de valor para ajudar os usuários a inserir os dados necessários.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Entrada de espaço reservado = seu nome ID = Nome do nome/> </p> <p> <p> <Label for = City> City: <Entrada espaço reservado = Where You Live Id = City Name = City/> </p> <p> <Label for = Fave> st id = nome favorito = favorito/> </cret> < /p> <Button Type = Submite> Enviar voto </botão> </morm> <Datalist ID = fruthList> <Valor da opção = Apples Label = Adorável A PPLES/> <Valor da opção = Orangees> Laranjas refrescantes </pption> < Valor da opção = cerejas/> </datalist>

Cada opção no elemento Datalist representa um valor que pode ser selecionado por um usuário.

O atributo readonly indica que a caixa de texto é apenas leitura, o atributo desativado indica que ele não pode ser editado e há diferenças no desempenho da aparência.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = nome> Nome: <Valor de entrada = Adam Disabled Id = Nome Nome/> </p> <p> <p> <Label for = City> City: <Valor de entrada = Boston readonly ID = Nome da cidade = City/> </p> <p> <Rótulo para = Fave> Frutas: <Valor de entrada = Apple ID = Nome favorito = Fave/> </Label> </p> <button type = submit> submtar voto </button> </morm>

O efeito no Chrome é o seguinte:

O formulário com a propriedade desativada é definida como cinza. caixa, mas não afeta o efeito da aparência e o conteúdo será enviado ao servidor.

O elemento de entrada do atributo de tipo é a senha é usada para inserir a senha. O elemento de entrada deste atributo suporta os seguintes atributos:

1) MaxLength: o número máximo de caracteres que os usuários podem inserir na caixa de senha;

2) padrão: usado para entrar na expressão regular de verificação;

3) espaço reservado: prompt no tipo de dados necessário;

4) READONLY: Defina a caixa de senha apenas para leitura;

5) Necessário: o usuário deve inserir um valor, caso contrário, não pode passar na verificação de entrada;

6) Tamanho: Defina sua largura com o número de caracteres visíveis na caixa de senha especificada;

7) Valor: Defina o valor da senha inicial.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ </Label> </p> <button type = submit> submtar voto </button> </morm>

Os caracteres inseridos pelo usuário são exibidos como*na caixa de senha, mas deve -se notar que, ao enviar o formulário, o servidor recebe uma senha de texto claro. Considere usar o SSL/HTTPS no navegador e o conteúdo de comunicação entre o servidor é criptografado.

A propriedade Type está configurada para enviar, redefinir e botão para gerar um botão como o elemento do botão.

1) Envie: Gere o botão para enviar formulários, atributos de suporte: Formação, FormEnctype, FormMethod, FormTarget e FormNovalidate.

2) Redefinir: Gere o botão do formulário fixo;

3) Botão: Gere botões ordinários sem qualquer operação.

O texto da descrição do botão em 3 é especificado através do atributo de valor.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ </Label> </p> <type de entrada = submeter valor = enviar voto/> <Tipo de entrada = Valor de reset = Resipo = B Utton Value = My Button/> </morm>

O efeito no Chrome é o seguinte:

A diferença entre o botão de geração e o uso do elemento do botão com o elemento de anúncio é que o último pode ser usado para exibir o texto que contém texto. No entanto, como cada navegador possui o mesmo método de processamento de elementos de entrada e alguns navegadores mais antigos (como o IE6) não podem lidar adequadamente com o elemento de botão, muitos sites estão mais inclinados a usar elementos de entrada.

O elemento de entrada do atributo de tipo aceita apenas o valor. Os atributos de suporte incluem:

1) Lista: Especifique o elemento Datalist que fornece o valor recomendado na caixa de texto, e seu valor é o valor de ID do elemento de dados;

2) min: defina o valor mínimo;

3) MAX: defina o valor máximo;

4) READONLY: Somente leitura;

5) Necessário: significa que o usuário deve inserir um valor;

6) Etapa: a etapa de ajustar o valor para cima e para baixo;

7) Valor: o valor inicial do elemento especificado.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ > </belt> </p> <p> <etiqueta para = preço> $ por unidade em sua área: <tipo de entrada = número da etapa = 1 min = 0 max = 100 valor = 1 id = preço do preço = preço/> </Label> </p> <type de entrada = submeter value = enviar voto/> </form>

O efeito no Chrome é o seguinte:

Usando o elemento de entrada com o atributo de tipo para o intervalo, os usuários podem usá -lo apenas para selecionar um valor numérico no escopo especificado primeiro.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ </Etiqueta> </p> <p> <Rótulo para = preço> $ por unidade em sua área: 1 <Tipo de entrada = intervalo de intervalo = 1 min = 0 max = 100 valor = 1 id = preço do preço = preço/100 </label> </p> <type de entrada = submeter value = enviar voto/> </form>

O efeito no Chrome é o seguinte:

O atributo de tipo é a caixa de seleção para representar a caixa de seleção.

1) verificado: se deve escolher por padrão;

2) exigido: indica que o usuário deve verificar a caixa de seleção;

3) Valor: Defina o valor dos dados enviado ao servidor, padrão.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ </Label> </p> <p> <Rótulo para = veggie> Você é vegetariano: <Tipo de entrada = ID da caixa de seleção = veggie = veggie/> veg etarariano Enviar voto/> </morm>

O efeito no Chrome é o seguinte:

Observe que, ao usar a caixa de seleção, a caixa de seleção é enviada ao servidor somente quando a caixa de seleção é enviada.

O elemento de entrada do atributo Type pode ser usado para gerar um conjunto de botões de Escolha única. Cada rádio representa uma opção e o mesmo grupo de rádio usa o mesmo nome. O grupo de botões de seleção único é adequado para cenas com menos opções.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPAREHORD = MIN 6 CARACTERS = Nome da senha = Senha/> </p> <p> d> Vote para sua fruta favorita </legend> <Label for = Apples> <Tipo de entrada = Valor da verificação de rádio = Apples ID = Apples Nome = Fave/> Apples </Label> <Label para = Orange> <Tipo de entrada = Valor de Rádio = Laranjas ID = Nome Orange = Favor/> Label > <Tipo de entrada = Valor do Rádio = Cherries ID = Cherries Nome = Fave/> </Label> </fieldset> </p> <Tipo de entrada = Submeter Valor = Enviar voto/> </form>

O efeito no Chrome é o seguinte:

TIPO ATRIBUIÇÃO EMAPEL, TEL e URL correspondem ao endereço de email, número de telefone e URL, respectivamente.

1) Lista: Especifique o elemento Datalist que fornece o valor recomendado na caixa de texto, e seu valor é o valor de ID do elemento de dados;

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

3) padrão: especifique a expressão regular para verificar a entrada;

4) espaço reservado: especifique um prompt no tipo de dados necessário;

5) READONLY: Leia a caixa de texto e leia apenas;

6) Necessário: indica que o usuário deve inserir um valor;

7) Tamanho: Número visível de caracteres;

8) Valor: o valor inicial do elemento especificado.

O email também suporta vários atributos, indicando que vários endereços de email podem ser aceitos.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <entrada de entrada = senha espaço reservado = min 6 caracteres = senha nome = senha/> </p> <p> <etiqueta = email = email> email: <entrada de entrada = email [email protected] Id = name de email = email/> </p> <p> <p> <Label para = tel> Tel: <TIPO DE INTRUTO = TEL PLAGELDER = (XXX) -XXX- XXXX ID = Tel Name = Tel/> </ Rótulo> </p> <p> <Rótulo para = url> Sua página inicial: <Tipo de entrada = url id = url nome = url/> </p> <tipo de entrada = submeter valor = voto de envio/> </mand>

O efeito no Chrome é o seguinte:

Alguns tipos de data e hora de entrada são adicionados ao HTML5, incluindo:

1) DateTime: Obtenha a data e hora do mundo, incluindo informações sobre o fuso horário;

2) DateTime-Local: Obtenha a data e hora local, não inclui informações sobre fuso horário;

3) Data: Obtenha a data local, sem informações sobre o fuso horário e horário;

4) mês: obtenha as informações anuais e mensais, sem informações de dia, horário e fuso horário;

5) Tempo: ganhe tempo;

6) Semana: Obtenha a semana atual.

Os atributos adicionais suportados pela data e hora do elemento de entrada incluem:

1) Lista: Especifique o elemento Datalist que fornece o valor recomendado na caixa de texto, e seu valor é o valor de ID do elemento de dados;

2) min: defina o valor mínimo;

3) MAX: defina o valor máximo;

4) READONLY: Somente leitura;

5) Necessário: o usuário deve inserir um valor, caso contrário, não pode passar na verificação de entrada;

6) Etapa: a etapa de ajustar o valor para cima e para baixo;

7) Valor: o valor inicial do elemento especificado.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ > </belt> </p> <p> <Rótulo para = lastBuy> Quando você comprou pela última vez: <type de entrada = date id = lastbuy name = lastbuy/> </label Value = Enviar voto/> </morm>

O efeito no Chrome é o seguinte:

Atualmente, a caixa de entrada de data e hora não é bem suportada na maioria dos navegadores.

O atributo de tipo é o selecionador de cores e o valor da cor é representado no formato de 7 caracteres: começando com#, e os próximos três dezesseis avanços, que representam os valores das três cores primárias de vermelho, verde e azul , como o valor de vermelho, verde e azul, como os valores das três cores primárias de vermelho, verde e azul, como #FF1234.

 <Form Method = Post Action = http: // titan: 8080/form> <p> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disable = Senha> Senha: <Entrada Tipo = Senha SPILHORDER = min 6 caractere = Nome da senha = Senha/</p> <p> <p> <Label = Fave> Fruta: <Valor de entrada = Apples ID = Nome Fave = Fave/ </Etiqueta> </p> <p> <Label para = cor> cor: <time de entrada = nome da cor = color/> </p> </p. /forma>

O efeito no Chrome é o seguinte:

Observe que a maioria dos navegadores não forneceu suporte especial para este elemento de entrada.

O elemento de entrada do tipo oculto pode ser usado para ocultar um item de dados e enviá -lo para o servidor ao enviar o formulário (geralmente para usar essa função).

 <Form Method = Post Action = http: // titan: 8080/form> <type de entrada = Nome oculto = Valor RecordId = 1234/<P> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disabled ID = Nome Nome = Nome/> </label> </p> <p> <Label para = senha> senha: <input type = senha espaço local = min 6 charals id = senha = senha/> </lab el> </p> < p> <p> <Rótulo para = Fave> Frutas: <Valor de entrada = Apples ID = Favor Favory = Fave/> </p> </p> <Tipo de entrada = Valor de envio = Enviar voto/> </morm>

O botão gerado pelo elemento de entrada do tipo de imagem é exibido como um ícone e o formulário é enviado após o clique. Os atributos de suporte incluem:

1) ALT: Forneça texto de explicação do elemento, que é útil para usuários que precisam usar a tecnologia de assistência desativada;

2) formação: o mesmo elemento do botão;

3) FormeEncType: Mesmo elemento de botão;

4) formmethod: mesmo elemento de botão;

5) FormTarget: Mesmo elemento de botão;

6) formnovalidato: o mesmo elemento de botão;

7) Altura: defina a altura das imagens em pixels;

8) SRC: especifique o URL da imagem a ser exibida;

9) Largura: Defina a largura da imagem no pixel;

 <Form Method = Post Action = http: // titan: 8080/form> <type de entrada = Nome oculto = Valor RecordId = 1234/<P> <Rótulo para = Nome> Nome: <Valor de entrada = Adam Disabled ID = Nome Nome = Nome/> </label> </p> <p> <Label para = senha> senha: <input type = senha espaço local = min 6 charals id = senha = senha/> </lab el> </p> < p> <p> <Rótulo para = Fave> Frutas: <Valor de entrada = Apples ID = Nome favorito = Favor/> </p> </p> <Tipo de entrada = imagem src = aceit.png nome = submT/> < /Forma "

Clique no botão de imagem para enviar o formulário.

O elemento de entrada do arquivo -TYPE é usado para fazer upload de arquivos, e o arquivo pode ser carregado no servidor ao enviar o formulário. Os atributos de suporte incluem:

1) Aceite: especifique o tipo de aceitação. Definição do tipo MIME, consulte RFC 2046 (http://tools.ies.org/html/rfc2046);

2) múltiplo: defina este atributo para fazer upload de vários arquivos ao mesmo tempo;

3) Necessário: o usuário deve inserir um valor.

 <Form Method = Post Action = http: // titan: 8080/form do formulário = multipart/form-data> <p> <Label for = name> Nome: <Entrada Valor = Adam Disabled Id = Name Na Me = Name/> </etiqueta> </p> <p> <Rótulo para = senha> Senha: <entrada de entrada = senha plantas = mín. FRUT: <Valor de entrada = Apples ID = Favor Favory = Fave/> </p> <p> <Tipo de entrada = Nome do arquivo = FileData/> </p> <Tipo de entrada >

Observe que o tipo de código do formulário pode ser carregado quando o multipart/formulário pode ser carregado. O efeito no Chrome é o seguinte:

O elemento SELET é usado para gerar uma lista de opções, que é mais compacta que o elemento de entrada do tipo radiiiiobutton e mais adequado para a situação com mais opções. O atributo suportado por este elemento inclui:

1) Nome: o nome da lista;

2) desativado: desative a lista de suspensão;

3) forma: uma ou mais formas pertencentes à área de texto;

4) foco automático: a área de texto obtém o foco automaticamente depois que a página é carregada;

5) exigido: deve ser preenchido;

6) Tamanho: o número de opções pode ser visto na lista de suspensão;

7) Múltiplo: você pode escolher várias opções.

Selecionar o padrão do elemento é uma lista de suspensão única de seleção -

 <Form Method = Post Action = http: // titan: 8080/form do formulário = multipart/form-data> <p> <Label for = name> Nome: <Entrada Valor = Adam Disabled Id = Name Na Me = Name/> </etiqueta> </p> <p> <Rótulo para = senha> Senha: <entrada de entrada = senha plantas = mín. Fruta favorita: <selecione id = nome favorito = favorito> <opção valu = maçãs rótulo selecionado = maçãs> maçãs </option> <opção value = laranja = laranjas </pption> <opção value = perars rótulo = peraras> peras> </pption> </leclect> </p> <tipo de entrada = submeter valor = enviar voto/> m>

O efeito no Chrome é o seguinte:

Após a definição de atributos de tamanho e vários atributos da lista, ele se torna uma caixa de seleção.

 <Form Method = Post Action = http: // titan: 8080/form do formulário = multipart/form-data> <p> <Label for = name> Nome: <Entrada Valor = Adam Disabled Id = Name Na Me = Name/> </etiqueta> </p> <p> <Rótulo para = senha> Senha: <entrada de entrada = senha plantas = mín. Fruta favorita: <select id = nome favorito = tamanho favorito = 5 múltiplo> <opção value = maçãs selectd rótulo = maçãs> maçãs </pption> <pution> es Rótulo = laranja> = Cerejas> cerejas </pption> <option value = perars rótulo = peraras> peras </pption> </select> </p> <type de entrada = submeter valor = submeter voto/> </mand>

Pressione a tecla Ctrl ao clicar na opção para selecionar várias opções. O efeito no Chrome é o seguinte:

Os elementos optGroup podem ser usados ​​para estabelecer uma determinada estrutura no conteúdo do elemento de seleção.

1) Rótulo: é usado para fornecer um pequeno título para todo o conjunto de opções;

2) Desativado: Quaisquer opções no grupo do grupo.

 <Form Method = Post Action = http: // titan: 8080/form do formulário = multipart/form-data> <p> <Label for = name> Nome: <Entrada Valor = Adam Disabled Id = Name Na Me = Name/> </etiqueta> </p> <p> <Rótulo para = senha> Senha: <entrada de entrada = senha plantas = mín. Fruta favorita: <select id = nome Favorito = Favor> <OptGroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </pption> Ion Valu = Label > <Rótulo optGroup = outros> <opção valu = Cherries Label = cereries> cerejas </pption> <opção value = perars rótulo = peraras> peraras </pption> tgroup> </leclect> </celt> </p> < Tipo de entrada = Valor de envio = voto de envio/> </morm>

O efeito no Chrome é o seguinte:

Os elementos OptGroup desempenham apenas um papel organizacional, e os usuários não podem escolhê -lo como uma opção.

O elemento textarea gera caixas de texto de linha múltipla e os usuários podem inserir o texto de várias linhas. Incluindo atributos incluem:

1) foco automático: a área de texto obtém o foco automaticamente depois que a página é carregada;

2) cols: largura visível, número inteiro;

3) Desativado: Desative esta área de texto;

4) forma: uma ou mais formas pertencentes à área de texto;

5) MaxLength: o número máximo de caracteres na área de texto;

6) Nome: o nome da área de texto;

7) espaço reservado: um breve lembrete do valor esperado da área de texto;

8) READONLY: A área de texto é apenas leitura;

9) Necessário: a área de texto é necessária;

10) linhas: o número de linhas visíveis na área de texto, número inteiro;

11) Enrole: Como alterar o texto na área de texto, incluindo: Soft (padrão).

 <Form Method = Post Action = http: // titan: 8080/form do formulário = multipart/form-data> <p> <Label for = name> Nome: <Entrada Valor = Adam Disabled Id = Name Na Me = Name/> </etiqueta> </p> <p> <Rótulo para = senha> Senha: <entrada de entrada = senha plantas = mín. Fruta favorita: <select id = nome Favorito = Favor> <OptGroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </pption> Ion Valu = Label > <Rótulo optGroup = outros> <opção valu = Cherries Label = cereries> cerejas </pption> <opção value = perars rótulo = peraras> peraras </pption> tgroup> </leclect> </celt> </p> < p> <texttarea cols = 20 linhas = 5 wrap = hard id = story name = story> diga -nos por que este é o seu favorait </sexttarea> </p> <type de entrada = envia >

O efeito no Chrome é o seguinte:

O elemento de saída representa o resultado do cálculo. Os atributos de suporte incluem:

1) Para: um ou mais elementos relacionados ao domínio de saída, separados no espaço médio;

2) forma: uma ou mais formas do campo de entrada;

3) Nome: o único nome do objeto (usado quando o formulário é enviado).

 <Form ansubMit = return false onput = res.value = quant.valueasNumber * price.valuEasNumber> <Fieldset> <legend> calculadora de preço </legend> t tipo = número de espaço reservado = ID da quantidade = Nome quant de quant/> <Tipo de entrada = Número espaço reservado = ID do preço = Nome do preço = preço/> = <saída para = nome do quant Nome = res/> </morm>

O sistema de tempo de JavaScript é usado para gerar uma calculadora simples.

O acima é todo o conteúdo deste artigo.