formulário unit3

1. Sintaxe do formulário

Resumo: o formulário deve ser usado com o item de formulário
<form method = "post" action = "http://www.baidu.com">
item de formulário:
</form>

Atributo 1: método Método de envio de formulário: get (padrão) post

O significado do formulário em html5 ? Colete dados do usuário (login, registro,

postagem , ... s) 1. Qual é a diferença entre obter envio e postar envio?
1) Características do método de envio get: O método de envio padrão do formulário
a. Os dados enviados serão exibidos na barra de endereço
. B. O tamanho dos dados transportados na barra de endereço não pode exceder cerca de 2k.
C. Você não pode fazer upload de arquivos com get d. Get
não é seguro

2) post As características do método de envio:
a. Garantir a segurança dos dados (relativa)
b. A transferência do arquivo deve ser enviada
pelo correio c. Os dados do pós- envio teoricamente não têm limite de tamanho
d. Os dados enviados não serão exibidos na barra de endereço

Atributo 2: O endereço do servidor onde o formulário de ação é enviado

2. Elementos do formulário (item)

1. Caixa de texto (exibir texto simples)

<! - 1. Caixa de texto (exibida em texto simples)
              nome: o nome do item de formulário ==> A fim de facilitar o servidor para distinguir informações individuais [deve]
              valor: definir o valor padrão
              tamanho: o comprimento da
              caixa de texto maxlength: a caixa de texto pode ser inserida Número máximo de caracteres
       ->
       Nome de usuário: <input type = "text" name = "username" value = "张三狗"
                     size = "30" maxlength = "3" />

2. Caixa de senha (mostra o texto cifrado)

<! - 2. Caixa de senha (exibida em texto cifrado)
              tipo: senha [Obrigatório]
              nome: O nome do item do formulário ==> Para facilitar o servidor para distinguir informações individuais [Obrigatório]
              valor: Defina o valor padrão
              tamanho: caixa de texto O comprimento de
              maxlength: o número máximo de caracteres que podem ser inseridos na caixa de texto
       ->
Senha: <input type = "password" name = "pwd" maxlength = "3" placeholder (prompt de texto) = "Digite a senha" />

3. Botões de rádio

<! - 3.        Tipo de caixa de seleção única (múltiplo)
: rádio [obrigatório]
       nome: o nome do item do formulário ==> A fim de facilitar o servidor para distinguir uma única informação [obrigatório deve ser consistente]
       valor: valor padrão definido [obrigatório]
       marcado : Se marcada marcada significa marcada ou marcada = "marcada" significa marcada
       ->
Gênero: <input type = "radio" name = "sex" value = "Male" CHECK = "CHECK" /> Masculino
       <input type = "radio "name =" sex "value =" Female "verificado /> Feminino

4. Caixa de seleção

<! - 4.               Tipo de caixa de seleção
: caixa de seleção [Obrigatório]
              nome: O nome do item do formulário ==> A fim de facilitar o servidor para distinguir informações individuais [Obrigatório deve ser consistente]
              valor: Defina o valor padrão [Obrigatório]
              marcado: Se deve verificar verificado significa verificado ou verificado = "verificado" significa verificado
       ->
Hobbies: <input type = "checkbox" name = "hobbies" value = "sleep" /> sleep
       <input type = "checkbox" name = "hobbies" value = "Aprendizado" verificado /> Aprendizado
       <input type = "checkbox" name = "hobbies" value = "Bagger" /> Bolsa

5. Caixa de lista

<! - 5. Caixa de listagem selecione o
              nome do rótulo                                                          : o nome do item do formulário ==> A fim de facilitar o servidor para distinguir um único item de informação [Deve escrever deve ser consistente]
              valor: Definir o valor padrão [Deve escrever]
              selecionado: se selecionar selecionado significa selecionado ou selecionado = "selecionado" significa o
              tamanho selecionado : a altura da lista suspensa
       ->

Educação: <select name = "xueli" size = "3">
                     <option value = "undergraduate"> graduação </option>
                     <option value = "especialidade" selecionada = "selected"> Especialidade </option>
                     <option value = "Graduate" selected> Graduate </option>
                     <option value = "Doctoral student"> Doctoral student </option>
       </ select>

6. Botão

<! - 6. Tipo de botão
:
reset (botão reset) imagem (botão de imagem) ==> a função de enviar o
botão do formulário (botão normal) Por padrão, não há resposta ao clicar em
enviar (botão enviar) ==> a função de enviar o
              nome do formulário : O nome do botão [não pode escrever]
              valor: O texto exibido pelo botão [não pode escrever]
       ->
       <input type = "reset" value = "RESET" />
       <input type = "image" src = "loginIcon. gif "/>
       <input type =" button "value =" Give me a beauty "/>
       <input type =" submit "value =" register "/>

Botão de reset
Botão de imagem
Botão normal
Botão de envio

7. Caixa de texto multilinha (campo de texto)

<! - 7. Caixa de texto multilinha (campo de texto)
       fileiras da tabela textarea : o número de linhas
       cols: o número de colunas
       nome: o nome do item de formulário ==> Para facilitar o servidor para distinguir informações individuais [Obrigatório]
       ->
Observações ··· ··》 <textarea name = "Apêndice" rows = "10" cols = "10"> </textarea>

8. Caixa de arquivo

<! - 8. File box
       type = "file"
       Nota:
       Adicionar formulário: enctype = "multipart / form-data" [Deve adicionar]
              nome: O nome do item de formulário ==> Para facilitar o servidor para distinguir informações individuais [Obrigatório]
       ->
Retrato: <input type = "file" name = "head_img" />

9. Email, site

<! - 9. Email, URL
              type = "email"
              name: o nome do item do formulário ==> Para facilitar o servidor para distinguir um único item de informação [Obrigatório]
              Nota: 1. Verifique automaticamente o formato do email.
                                   1. Formato de URL automático.
       ->
       Email: <input type = "email" name = "email" />
       URL: <input type = "url" name = "url" />

10. Números

数字:
<input type = "number" name = "num" min = "0" max = "100" step = "10" />

11. Slider

请输入数字:
<input type = "range" name = "range1" min = "0" max = "10" step = "2" />

12. Caixa de pesquisa

Insira a palavra-chave de pesquisa:
<input type = "search" name = "sousuo" />

3. Formulário avançado de aplicação

1. Domínio oculto

type = "escondido"

2. Somente leitura

somente leitura

Caixa de texto somente leitura

3. Desativar

Desativado

Botão Desativar

4. Etiqueta

1. Aumente a usabilidade do mouse
2. Mude automaticamente o foco para o elemento de formulário relacionado ao rótulo

5 、 marcador de posição 、 obrigatório 、 padrão

<! - 5. Prompt de espaço reservado : o prompt de conteúdo de entrada de caixa de texto
       obrigatório não pode estar vazio:
       padrão de campo obrigatório Expressão regular: regra de verificação, expressão regular
       ^ 13 [0-9] {9} $ número de telefone não começa com 13
       ^ 1 [358] / d {9} O formulário só pode ser enviado com um número de telefone começando com 13 15 18
              ->
Nome de usuário: <input name = "username" required placeholder = "Please enter 6 usernames" />

       Telefone: < input name = "mobile" pattern = "^ 13 [0-9] {9} $" />

HTML Capítulo 3 Notas de revisão do formulário