Propriedades do formulário HTML5

Propriedades HTML5 nova forma

<Form> do HTML5 e <input> adiciona várias novas propriedades.

<form> novos atributos:

• autocomplete
• novalidate

<input> Novas propriedades:

• autocomplete
• autofocus
• formulário
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• altura e largura
• lista
• min e max
• múltiplo
• padrão (regexp)
• espaço reservado
• necessário
• passo

<Form> / <input> atributo autocomplete

atributo autocomplete especifica o campo de formulário ou entrada deve ter autocomplete.

Quando os usuários começar a digitar no campo de preenchimento automático, o navegador deve exibir opções para preencher esse campo.

atributoautocomplete possível elemento de formulário está ligado, e no elemento de entrada é desligado: Tip.

Nota: autocomplete aplicar <form> tag, e os seguintes tipos de <input> tag: texto, pesquisa, url, telefone , e-mail, senha, datepickers, escala e cor.

Exemplos

formulário HTML no autocomplete aberto (a autocomplete campo de entrada de desligamento):

<Form action = "demo form.php" autocomplete = "on"> Nome : <input type = "text" name = "fname"> <br> Nome: <input type = "text" name = "lname"> <br> E-mail: <input type = "email" name = "email" autocomplete = "off"> <br> <Input type = "submit"> </ Form>

tente »

Dica: Alguns navegadores, você pode precisar ativar a funcionalidade Conclusão automática, a fim de pegar o imóvel.

<Form> propriedade novalidate

Uma propriedade booleana propriedade novalidate.

atributo novalidate especifica quando enviar o formulário não deve validar a entrada forma ou de domínio.

Exemplos

Sem verificação envio de dados de formulário

<Form action = "demo form.php" novalidate> E-mail: <input type = "email" name = "user_email"> <Input type = "submit"> </ Form>

tente »

<Input> atributo autofocus

atributo autofocus é um atributo booleano.

atributo autofocus especifica quando a página é carregada, o domínio receber automaticamente o foco.

Exemplos

Vamos "Nome" campo de entrada entrar no foco automático no carregamento da página:

First name:<input type="text" name="fname" autofocus>

tente »

<Input> propriedade de formulário

atributo especifica um campo de entrada de formulário pertence a uma ou mais formas.

Dica: Para citar mais de uma forma, use uma lista separada por espaço.

Exemplos

Localizado a forma física fora do campo de entrada refere-se ao formulário HTML (o formulário é ainda uma entrada de formulário faz parte):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

tente »

<Input> propriedade formaction

A propriedade formaction é usado para descrever a URL do envio do formulário.

O formaction atributos override <form> elemento no atributo action.

Nota: O atributo formactiontype = "submit" e type = "image".

Exemplos

HtmlForm submeter o seguinte formulário contém botão dois endereços diferentes:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

tente »

<Input> propriedade formenctype

formenctype atributo descreve o formulário é enviado para a codificação de dados do servidor (apenas para o método de formulário formulário = "post" forma)

sobreposições de propriedades formenctype ENCTYPE atribuir elementos de formulário.

Principal: Este atributo type = "submit" e type = "image" usado em conjunto.

Exemplos

O primeiro botão enviar para enviar os dados do formulário é codificado por padrão, o segundo botão de submeter-se a "multipart / form-data" formato de codificação para enviar os dados do formulário:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

tente »

<Input> propriedade formmethod

atributo formmethod define o envio do formulário caminho.

propriedade formmethod cobrindo o <form> atributo method do elemento.

Nota: Este atributo pode ser usado com type = "submit" e type = "image" usado em conjunto.

Exemplos

Redefinir o formulário de submissão a título de exemplo:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

tente »

<Input> propriedade formnovalidate

propriedade novalidate é uma propriedade booleana.

atributo novalidate descreve os elementos <input> não precisa ser validado quando o formulário é enviado.

atributos formnovalidate substituir atributo novalidate <form> elemento.

Nota: tipo de atributo formnovalidate = "enviar para uso com

Exemplos

Dois botões de enviar o formulário (não aplicável com verificação):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

tente »

<Input> propriedade formtarget

atributo formtarget especifica um nome ou uma palavra-chave para indicar os dados de exibição recebidas após o formulário é enviado.

As sobreposições de propriedades formtarget <form> atributo de destino do elemento.

Nota: tipo de atributo formtarget= "submit" e type = "image" usado em conjunto.

Exemplos

Dois botões de enviar o formulário exibido em janelas diferentes:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

tente »

atributos <input> altura e largura

atributos de altura e largura especificada para o tipo de imagem do <input> altura da imagem tag e largura.

Nota: altura e largura propriedades só se aplicam ao tipo de imagem <input> tag.

Dica: A imagem geralmente especificar atributos de altura e largura.Se a imagem de definir a altura e a largura do espaço requerido para a imagem quando a página é carregada será retida. Sem esses atributos, o navegador não sabe o tamanho da imagem, e não pode anular o espaço apropriado. Fotos durante o processo de carregamento irá afetar o layout de página de mudança (embora imagem foi carregada).

Exemplos

Define uma imagem botão enviar, use atributos de altura e largura:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

tente »

<input> propriedades de lista

atributo de lista datalist especifica os campos de entrada. datalist é uma lista de opções para os campos de entrada.

Exemplos

Pré-definido em <datalist> em <input> valor:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

tente »

<Input> mínimo e máximo de atributos

min, max, e os atributos de passo são usados ​​como tipos de entrada que contêm números ou datas Limited (restrições).

Nota: min, max, e os atributos da etapa aplica aos seguintes tipos de <input> tag: selecionadores de data, número e alcance.

Exemplos

<Input> elementos do configurações mínimas e máximas:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

tente »

<input> várias propriedades

atributo múltiplo é um atributo booleano.

vários especifica atributos elemento <input> para selecionar vários valores.

Nota: várias propriedades aplicam-se aos seguintes tipos de <input> tag: e-mail e file:

Exemplos

Upload de vários arquivos:

Select images: <input type="file" name="img" multiple>

tente »

<Input> propriedade padrão

atributo padrão descreve uma expressão regular usada para validar o valor de <input> elementos.

Nota: atributo padrãose aplica aos seguintes tipos de <input> tag: texto, pesquisa, url, tel , email, e senha.

Dica: É usado para o mundial título atributo descreve o modo.

Dica: você pode em nosso tutorial JavaScript para aprender sobre o conteúdo de uma expressão regular

Exemplos

O exemplo a seguir mostra um três cartas contêm campo de texto apenas (sem números ou caracteres especiais):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

tente »

<Input> atributo espaço reservado

atributo de espaço reservado fornece uma pista (pista), descrevem o valor esperado do campo de entrada.

Um breve lembrete será exibida no campo de entrada antes do valor de entrada do usuário.

Nota: atributo de espaço reservadose aplica aos seguintes tipos de <input> tag: texto, pesquisa, url, telefone , e-mail e senha.

Exemplos

campo de entrada de texto de aviso t:

<input type="text" name="fname" placeholder="First name">

tente »

<Input> atributo obrigatório

atributo obrigatório é um atributo booleano.

atributo obrigatório que especifica um campo de entrada deve ser preenchido (não vazia) antes de enviar.

Nota: atributos necessáriospara os seguintes tipos de <input> tag: texto, pesquisa, url, telefone , e-mail, senha, selecionadores de data, número, caixa, rádio e arquivo.

Exemplos

Não campos de entrada vazios pode:

Username: <input type="text" name="usrname" required>

tente »

<input> atributos da etapa

atributo passo para o campo de entrada especifica os intervalos de números legais.

Se a etapa = "3", números legais poderia ser -3,0,3,6, etc

Dica: atributo passopode criar um valor máximo regional e atributos min.

Nota: etapa tipos de atributos usados em conjunto com o seguinte tipo: número, gama, data, data e hora , data e hora-local, mês, hora e semana.

Exemplos

Predeterminado etapa etapa de entrada 3:

<input type="number" name="points" step="3">

tente »

tag HTML5 <input>