English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Foram adicionadas várias novas propriedades de formulário, form adicionou autocomplete e novalidate, input adicionou autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height e width, list, min e max, multiple, pattern (regexp)
HTML5 Os <form> e <input> tags adicionaram várias novas propriedades.
Novas propriedades do <form>：
autocomplete
novalidate
Novas propriedades do <input>：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height e width
list
min e max
multiple
pattern (regexp)
placeholder
required
step
A propriedade autocomplete define que o campo form ou input deve possuir função de conclusão automática.
Quando o usuário começar a digitar no campo de conclusão automática, o navegador deve exibir as opções preenchidas no campo.
Aviso: A propriedade autocomplete pode estar ativada no elemento form, mas desativada no elemento input.
Atenção: autocomplete se aplica ao marcador <form>, bem como aos seguintes tipos de marcadores <input>: text, search, url, telephone, email, password, datepickers, range e color.
Ativar autocomplete (um campo input desativado) no formulário HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-"form.php" autocomplete="on"> Nome: <input type="text" name="fname"><br> Sobrenome: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </<form> <p>Preencha e envie o formulário, em seguida, recarregue a página para ver como o conteúdo é preenchido automaticamente.</p> <p>Atenção: A propriedade autocomplete do formulário é "on" (ligado), mas e-mail é automaticamente definido como "off" (desligado).</p> </body> </html>Teste e veja ‹/›
Dica: Em alguns navegadores, você pode precisar ativar a função de conclusão automática para que o atributo funcione.
A propriedade novalidate é uma propriedade booleana (boolean).
A propriedade novalidate define que o formulário ou os campos input não devem ser validados ao submeter.
Enviar dados do formulário sem validação
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-"form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </<form> <p><strong>Atenção:</strong>no Safari e Internet Explorer 9 As versões anteriores não suportam a propriedade novalidate.</p> </body> </html>Teste e veja ‹/›
A propriedade autofocus é uma propriedade booleana.
A propriedade autofocus define que o campo seja automaticamente focado ao carregar a página.
Deixe o campo de entrada "Nome" automaticamente focado ao carregar a página:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname" autofocus><br> Sobrenome: <input type="text" name="lname"><br> <input type="submit"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9Versões mais antigas do IE não suportam a propriedade "autofocus" do elemento "input".</p> </body> </html>Teste e veja ‹/›
A propriedade "form" define um ou mais formulários aos quais pertence o campo de entrada.
Aviso:Para referenciar mais de um formulário, use uma lista separada por espaços.
Os campos de entrada localizados fora do formulário "form" fazem referência ao HTML formulário (o formulário de entrada ainda faz parte do formulário "form"):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php" id="form1"> Nome: <input type="text" name="fname"><br> <input type="submit" value="Enviar"> </<form> <p> O campo "Nome" não está dentro do formulário "form", mas também faz parte do formulário "form".</p> Nome: <input type="text" name="lname" form="form1"> <p><b>Atenção:</b> O IE não suporta a propriedade "form"</p> </body> </html>Teste e veja ‹/›
A propriedade "formaction" é usada para descrever o endereço de URL de envio do formulário.
A propriedade "formaction" substitui a propriedade "action" do elemento "<form>".
Atenção: A propriedade "formaction" é usada para "type="submit"" e "type="image"".
O seguinte formulário HTML contém dois botões de envio de endereços diferentes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Sobrenome: <input type="text" name="lname"><br> <input type="submit" value="Submeter"><br> <input type="submit" formaction="demo-admin.php" valor="enviar"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9Versões mais antigas do IE não suportam a propriedade "formaction" do elemento "input".</p> </body> </html>Teste e veja ‹/›
A propriedade "formenctype" descreve a codificação de dados enviados para o servidor pelo formulário (apenas para formulários "method="post"" no formulário)
A propriedade "formenctype" sobrescreve a propriedade "enctype" do elemento "form".
Principal: Esta propriedade é usada em conjunto com "type="submit"" e "type="image"".
O primeiro botão de envio envia os dados do formulário com codificação padrão, o segundo botão de envio com "multipart/form-data" formato de codificação para enviar dados do formulário:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-post-enctype.php" método="post"> Nome: <input type="text" name="fname"><br> <input type="submit" value="Enviar"> <input type="submit" formenctype="multipart/form-data" valor="Multipart/form-data submissão"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9Versões do IE mais antigas não suportam a propriedade "formenctype" do elemento "input".</p> </body> </html>Teste e veja ‹/›
O atributo formmethod define o método de submissão do formulário.
O atributo formmethod sobrescreve o atributo method do elemento <form>.
Atenção: Este atributo pode ser usado em conjunto com type="submit" e type="image".
Exemplo de redefinição do método de submissão do formulário:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> Nome: <input type="text" name="fname"><br> Sobrenome: <input type="text" name="lname"><br> <input type="submit" value="Enviar"> <input type="submit" formmethod="post" formaction="demo-form.php" value="Submeter usando POST"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9E versões mais antigas do IE não suportam o atributo formmethod do tag <input>./p> </body> </html>Teste e veja ‹/›
O atributo novalidate é um atributo booleano.
O atributo novalidate descreve que o elemento <input> não precisa ser validado ao submeter o formulário.
O atributo formnovalidate sobrescreve o atributo novalidate do elemento <form>.
Atenção: O atributo formnovalidate é usado em conjunto com type="submit".
Formulário com dois botões de submissão (com e sem validação):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submeter"><br> <input type="submit" formnovalidate="formnovalidate" value="Submeter sem validação"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9E versões mais antigas do IE ou Safari não suportam o atributo formnovalidate do tag <input>./p> </body> </html>Teste e veja ‹/›
O atributo formtarget especifica um nome ou uma palavra-chave para indicar onde os dados do formulário serão exibidos após a submissão.
O atributo formtarget sobrescreve o atributo target do elemento <form>.
Atenção: O atributo formtarget é usado em conjunto com type="submit" e type="image".
Formulário com dois botões de submissão, exibido em janelas diferentes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Sobrenome: <input type="text" name="lname"><br> <input type="submit" value="Submeter normal"> <input type="submit" formtarget="_blank" value="Submeter em uma nova página"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9E versões mais antigas do IE não suportam o atributo formtarget da tag input.</p> </body> </html>Teste e veja ‹/›
Os atributos height e width definem a altura e largura da imagem para as tags <input> do tipo image.
Atenção: Os atributos height e width são aplicáveis apenas às tags <input> do tipo image.
Aviso:Os atributos height e width geralmente são especificados juntos. Se a altura e a largura da imagem forem definidas, o espaço Será mantido ao carregar a página. Sem esses atributos: O navegador não sabe o tamanho da imagem e não pode reservar Espaço apropriado. Durante o carregamento da imagem, o layout da página pode mudar. (Apesar de a imagem já estar carregada).
Definindo um botão de envio de imagem, utilizando os atributos height e width:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Sobrenome: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Enviar"> </<form> </body> </html>Teste e veja ‹/›
O atributo list define a lista de opções para o campo de entrada. A lista é uma lista de opções para o campo de entrada.
Definir valores pré-definidos para o <input> dentro de <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9(Versões mais antigas do IE), o Safari não suporta a tag datalist.</p> </body> </html>Teste e veja ‹/›
Os atributos min, max e step são usados para definir limitações (constrangimentos) para tipos de entrada que contêm números ou datas.
Atenção: os atributos min, max e step são aplicáveis aos seguintes tipos de tags <input>: seletores de data, número e range.
Definição do valor mínimo e máximo do elemento <input>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Entrada 1980-01-01 datas anteriores: <input type="date" name="bday" max="1979-12-31><br> Entrada 2000-01-01 datas posteriores: <input type="date" name="bday" min="2000-01-02><br> Quantidade (em1e5entre): <input type="number" name="quantity" min="1" max="5><br> <input type="submit"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9Versões mais antigas do IE e Firefox não suportam os atributos max e min do elemento input.</p> <p><strong>Atenção:</strong> No Internet Explorer 10Os atributos max e min não suportam entrada de datas e horários, IE 10 Esses tipos de entrada não são suportados.</p> </body> </html>Teste e veja ‹/›
O atributo multiple é um atributo booleano.
O atributo multiple permite que múltiplos valores sejam selecionados no elemento <input>.
Atenção: O atributo multiple é aplicável aos seguintes tipos de elementos <input>: email e file:
Envie vários arquivos:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Escolha a imagem: <input type="file" name="img" multiple> <input type="submit"> </<form> <p>Tente selecionar uma ou várias imagens.</p> <p><strong>Atenção:</strong> Internet Explorer 9Versões mais antigas do IE não suportam o atributo multiple do elemento input.</p> </body> </html>Teste e veja ‹/›
O atributo pattern descreve uma expressão regular usada para verificar o valor do elemento <input>.
Atenção:O atributo pattern é aplicável aos seguintes tipos de elementos <input>: text, search, url, tel, email e password.
Dica: é usado globalmente title A propriedade descreve o padrão.
O exemplo a seguir mostra um campo de texto que pode conter apenas três letras (sem números e caracteres especiais):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"-8">
<meta charset="utf3codebox.com)</title>/title>
</head>
<body>
<form action="demo-form.php">
Código de país: <input type="text" name="country_code" pattern="[A-Za-z]{3"
title="Código de país de três letras">
<input type="submit">
</<form>
<p><strong>Atenção:</strong> Internet Explorer 9Versões mais antigas do IE ou Safari não suportam o atributo pattern do elemento input.</p>
</body>
</html>Teste e veja ‹/›O atributo placeholder fornece uma dica (hint) que descreve o valor esperado para o campo de entrada.
Dicas curtas são exibidas no campo de entrada antes que o usuário insira um valor.
Atenção: O atributo placeholder é aplicável aos seguintes tipos de tags <input>: text, search, url, telephone, email e password。
Texto de aviso do campo input t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="Primeiro nome"><br> <input type="text" name="lname" placeholder="Último nome"><br> <input type="submit" value="Enviar"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9E versões do IE mais antigas não suportam o atributo placeholder do tag input.</p> </body> </html>Teste e veja ‹/›
O atributo required é um atributo booleano.
O atributo required especifica que o campo de entrada deve ser preenchido antes de ser submetido (não pode estar vazio).
Atenção:O atributo required é aplicável aos seguintes tipos de tags <input>: text, search, url, telephone, email, password, pickers de data, number, checkbox, radio e file。
O campo input não pode estar vazio:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9E versões do IE mais antigas, ou Safari, não suportam o atributo required do tag input.</p> </body> </html>Teste e veja ‹/›
O atributo step define intervalos de números válidos para o campo de entrada.
Se step="3Se " -3,0,3,6 e
Dica: O atributo step pode ser usado com Os atributos max e min criam um valor de faixa.
Atenção: o atributo step é usado juntamente com os tipos a seguir: number, range, date, datetime, datetime-local, mês, hora e semana.
Define o passo do input step como3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"-8"> <meta charset="utf3codebox.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </<form> <p><strong>Atenção:</strong>Internet Explorer 9As versões do IE anteriores ao 5 ou o Firefox não suportam o atributo step do elemento input.</p> </body> </html>Teste e veja ‹/›
| Etiqueta | Descrição |
| <form> | Definir um formulário |
| <input> | Definir um campo de entrada |