Aqui, apresentaremos o conhecimento dos elementos de formulário e o envio de formulários.
elemento de forma 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:
| Valor de atributo | ilustrar |
|---|---|
| Aceitar-Charset | O conjunto de personagens que o servidor pode lidar, vários conjuntos de caracteres são divididos por espaços |
| Ação | URL que aceita solicitações, esse valor pode ser coberto pela propriedade de formação do elemento de entrada ou botão no elemento de formulário |
| Elementos | Todos os conjuntos de controle no formulário (htmlcollection) |
| Enctype | O tipo de codificação solicitado, esse valor pode ser coberto pela propriedade FormEnctype do elemento de entrada ou botão no elemento de formulário |
| comprimento | Número de controles no formulário |
| Método | O tipo de solicitação HTTP a ser enviado geralmente é obter ou postar. |
| nome | O nome do formulário |
| Reiniciar () | Redefina todos os domínios do formulário para o valor padrão |
| enviar () | Enviar formulário |
| alvo | O nome da janela para enviar solicitações e resposta a receber, esse valor pode ser coberto pela propriedade FormTarget de entrada ou elemento do botão no elemento de formulário |
| AutoComplete | Se deve compensar automaticamente os elementos da tabela |
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>
rádioComo 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
Espaço reservadoForneç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.
Tipo = ocultoDefina 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.
Botão EnviarAdicione 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.
Enviar eventoA 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 ()} Submissão de formulário e experiência do usuárioCom 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.
Verificação do formulário JavaScriptO 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?
Deve -filar (ou escolher) o projetoAs 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> Verificação de e-mailAs 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> Submissão de chave de atalhoNa 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.
Navegador lembre -se da senha da contaAo 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.
ResumirQuando 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