A coleção de coleta de dados de formulários e formulários em HTML

Aqui, apresentaremos o conhecimento dos elementos de formulário e o envio de formulários.

A interface DOM do elemento de forma é HTMLFormElement , que herda do HTMLElement , por isso possui os mesmos atributos padrão que outros elementos HTML, mas possui vários atributos e métodos exclusivos: ele próprio:

O elemento de entrada é um elemento de formulário amplamente usado.

Entrada de texto <Tipo de entrada = Nome do texto =>

Enviar entrada <Tipo de entrada = Enviar>

A entrada de botão único <Tipo de entrada = nome do rádio = deve ter o mesmo valor de nome = o valor do enchimento é melhor para corresponder>

Digite <Tipo de entrada = Nome da caixa de seleção = o mesmo valor de nome = Valores correspondentes diferentes>

Entrada digital <Tipo de entrada = número min = max => A caixa de entrada pode inserir apenas números e pode definir o valor máximo e o valor mínimo.

O intervalo de entrada <Tipo de entrada = intervalo min = max => semelhante ao número, mas mostra uma barra deslizante em vez da caixa de entrada.

A cor de entrada <Tipo de entrada = cor> exibirá um seletor de cores.

A entrada de data <Tipo de entrada = Data> exibirá um seletor de data.

Entrada de e -mail <Tipo de entrada = email> é exibida como uma caixa de entrada de texto e um teclado personalizado será exibido.

Tel Entrada <Tipo de entrada = Tel> Semelhante à entrada de email

URL Entrada <Tipo de entrada = URL> Semelhante à entrada de email, um teclado personalizado também será exibido.

Os elementos da textarea podem criar uma área de texto com várias linhas.

<textário nome = id = cor = 30 linhas = 10> </sexttarea>

Os valores de atributo de cols e linha representam a largura e a altura da área de texto.

Selecione elementos e elementos de opção podem ser usados ​​para criar um menu Drop -Robone.

<selecione nome = id => <opção value => </pption> <opção value => </pption> <opção value => </oplct>

Como agrupar?

exemplo:

<entrada de entrada = nome do rádio = valor favorito = jogo> jogar jogos

<entrada de entrada = nome de rádio = valor favorito = código de gravação> Código de gravação

<Tipo de entrada = Nome do Rádio = Valor do Sexo = Man> Masculino

<Tipo de entrada = Nome do Rádio = Valor Sexo = Mulher> ​​Feminino, Mulher,

Este são os dois grupos de rádio

Forneça uma informação rápida (dica) que pode descrever o valor esperado do campo de entrada.

O prompt será exibido quando o campo de entrada estiver vazio e desaparecerá quando o campo obtiver o foco.

Defina entrada oculta. Os campos ocultos não são visíveis para os usuários. Os campos ocultos geralmente armazenam um valor padrão e seus valores também podem ser modificados pelo JavaScript.

Por exemplo, para segurança, os valores de nome e valor que não são visíveis para os usuários em segundo plano podem ser usados ​​para verificar o plano de fundo para verificar e evitar páginas de falsificação.

Adicione um botão de envio ao formulário para permitir que os usuários enviem formulários.

Os três botões a seguir podem acionar o evento de envio do formulário ao clicar:

 <Tipo de entrada = submeter /> <Button Type = submeter> < /button> <entrada de entrada = imagem />

O valor padrão do tipo do elemento do botão na especificação é enviado, mas o valor da meditação é o botão no IE678, por isso é necessário adicionar manualmente a propriedade Type = enviar ao elemento do botão da compatibilidade.

A pessoa inicial pode pensar que o envio do formulário é acionado pelo evento de cliques do botão de envio.

 Form.addeventListener ('submeter', function (e) {if (valid ()) {...} e.PreventDefault ()})

Quando não houver um dos três botões mencionados acima no elemento de formulário, o usuário não poderá enviar o formulário (a tecla Enter também é inválida submit() . submit()

 if (value ()) {form.submit ()}

Com base na atual tecnologia popular AJAX+Cross -Domain Post (CORS), é provável que não usem o elemento de formulário para enviar diretamente dados ao servidor. Embora isso seja viável, há um fenômeno de degradação na maioria dos casos.

O JavaScript pode ser usado para verificar esses dados de entrada no formulário HTML antes que os dados sejam enviados ao servidor.

Esses dados típicos de formulário verificados por JavaScript são:

O usuário preencheu os itens necessários no formulário?

O endereço de correio inserido pelo usuário é legal?

O usuário inseriu uma data legal?

Os usuários inserem texto no campo numérico?

As seguintes funções são usadas para verificar se o usuário preencheu o item necessário (ou necessário) no formulário. Se deve ser preenchido ou a opção estiver vazia, a caixa de aviso será exibida e o valor de retorno da função será falso, caso contrário, o valor de retorno da função é verdadeiro (significa que os dados não são problemas):

 Função value_required (campo, alerttxt) {com (campo) {if (value == null || value ==) {alerttxt);

Abaixo está o código com o formulário HTML:

 <html> <head> <script type = text/javascript> função value_required (campo, alerttxt) {com (campo) {if (value == null || value ==) {alert (alert lerttxt); {Return true}} função value_form (this) {com (this) {if (value_required (email, email deve ser preenchido!) {Email.foc US (); return false}} < /script> </ad Head> <Body> <formulário action = submitpage.htm onSubMit = return validate_form (this) método = post> email: <tipo de entrada = nome do texto = 30> <entrada de entrada = submit value = submit> </morm> </body> < /html>

As funções a seguir verificam se os dados de entrada estão em conformidade com a sintaxe básica do endereço de email.

Isso significa que os dados de entrada devem conter@ símbolos e números de pontos (.). Ao mesmo tempo,@ não é o primeiro caractere do endereço de e -mail e pelo menos um número de ponto depois@ 同时:

 Função value_email (campo, alerttxt) {com (campo) {APOS = value.indexOf (@) dotpos = value.LastIndexOf (.) If (Apos <1 || dotpos-apos <2) LERT (alerttxt); Else {return true}}}

Abaixo está o código completo com o formulário HTML:

 <html> <head> <script type = text/javascript> função value_email (campo, alerttxt) {com (campo) {Apos = value.indexOf (@) dotpos = value .lastIndexOf (.) if (Apos <1 | dotpos-apos <2) {alert (alerttxt); = False) {email.focus (); Nome do texto = Tamanho do email = 30> <Tipo de entrada = Submeter Valor = submeter> </morm> </body> </html>

Na ausência do pacote de elemento do formulário, mesmo que o foco da página atual esteja no elemento do formulário, pressione as teclas Enter não acionam o formulário do formulário. , destruindo o fluxo original original. A solução mais fácil é embrulhá -lo com um elemento de formulário na camada externa e determinar que existe pelo menos um botão de envio no elemento de formulário. No momento, quando o domínio de entrada no formulário é focado, o usuário pressiona a tecla Enter para acionar o envio.

Ao enviar um formulário, o navegador de alto nível, incluindo o navegador móvel, perguntará aos usuários se você precisa se lembrar da senha da conta do usuário. Na ausência de elemento de forma, o navegador não aparecerá na janela de consulta.

Quando desenvolvemos um aplicativo de formulário, não devemos tentar remover elementos de formulário e enviá -lo diretamente. Envie o processamento de incidentes no evento de envio do elemento de formulário, não o evento de clique do botão de envio.

Consulte:

Elemento de formulário e envio de formulário