Ambiente web 12
•Transferir como PPTX, PDF•
0 gostou•406 visualizações
O documento descreve os principais elementos de formulários em HTML, como campos de texto, senha, data e botões, e explica como inseri-los em uma página usando tags como <form> e <input>. Também apresenta atributos importantes como method, action e name.
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Ambiente web 12
Semelhante a Ambiente web 12 (20)
Mais de Anderson Henrique
Mais de Anderson Henrique (20)
Ambiente web 12
- 2. Elementos de um site bastante úteis para: Envio de Mensagens - Cadastro de Pessoas - Provas Online - Áreas Restritas - Pesquisas de Opinião -
- 3. Todos os formulários utilizam um código específico para inserir os elementos gráficos: Campo de Texto <textfield> Campo de Senha <password> Botão Rádio <radiobutton> Campo de Data <date> Área de Texto <textarea>
- 4. Campo para números <number> Campo para Seleção <selection> Botão para Enviar <submit> Botão para Limpar <reset> O formulário é inserido na página HTML através da TAG <form>
- 5. Todos os formulários utilizam dois atributos principais: <method> Representa o método pelo qual as informações contidas nos campos serão enviadas <function> Representa o local para onde esse formulário enviará os dados contidos nos campos
- 6. Analise a sintaxe abaixo: <HTML> <HEAD> <BODY> <FORM method=“post” action=“recebe.php”> </FORM> </BODY> </HTML>
- 7. O método utilizado acima foi o POST, poderíamos também utilizar o método GET As informações desse formulário serão enviadas para uma página chamada “recebe.php”, a qual armazenará os dados (DATE) contidos nos campos desse formulário.
- 8. Percebam que neste formulário não foi inserido nenhum CAMPO, neste exemplo utilizaremos apenas alguns campos: <nome completo> <email> <data de nascimento> <sexo> <escolaridade> <comentários>
- 9. <FORM method=“post” action=“recebe.php”> Nome Completo <input type=“text”> E-mail <input type=“email”> Data Nascimento <input type=“date”> Sexo <selection> <option>Masculino</option> <option>Feminino</option> </selection> Escolaridade <input type=“radiobutton”>Ensino Fundamental <input type=“radiobutton”>Ensino Médio
- 10. Comentários <textarea></textarea> <input type=“submit” value=“Enviar”> <input type=“reset” value=“Limpar”> </FORM> Principais atributos dos Campos de um formulário: Size – especifica o tamanho do campo Maxlength – delimita a quantidade de caracteres podem ser digitados
- 11. name – especifica um nome pelo qual o campo será identificado Cols - especifica a quantidade de colunas Rows – especifica a quantidade de linhas Um pouco de HTML 5 Required name – não permite que o campo permaneça em branco Placeholder – digita um valor inicial dentro do campo servindo como legenda
- 12. autofocus – faz com que um campo seja automaticamente selecionado quando a página for carregada (focar no campo) Value – determina qual valor será armazenado quando o campo for selecionado (muito utilizado nos campos (select, radio, checkbox) Pattern – permite criar uma máscara obrigado o usuário respeitar a forma de escrita do campo Aprendendo a utilizar o atributo pattern: pattern="[0-9]{4}[-][0-9]{4}
- 13. pattern="[0-9]{4}[-][0-9]{4} O intervalo de números que se encontram entre colchetes determina quais números podem ser aceitos nesse campo O número que se encontra entre chaves determina a quantidade de números que o campo pode receber [0-9] o usuário pode utilizar os números dentro desse intervalo Ex: 3639 no máximo utilizar 4 números. [-] o usuário deverá digitar o caractere – pois a máscara é determinada pelo contido entre colchetes.