O HTML5 disponibiliza o tipo de campo tel, que é projetado para uso em números de telefone.
Seu número de telefone: <input type="tel" name="telefone">
Em smartphones e tablets, ao clicar no campo, abre-se o teclado numérico para inserir o número de telefone.
Campos para endereços da internet com url
Campos do tipo url são destinados à entrada de endereços da internet.
<input type="url" />
Os campos de URL são validados automaticamente. Os navegadores devem verificar se um URL sintaticamente correto foi inserido nesses campos.
Campo de saída com output
O campo output permite a saída de conteúdos. Isso é útil, por exemplo, em conjunto com JavaScript. Assim, este campo aqui pode ser utilizado para a saída de variáveis. Da mesma forma, o campo pode ser usado para a saída de valores calculados. O campo destina-se exclusivamente à saída de dados. Entradas dos usuários não são possíveis.
Um exemplo:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Olá,"
wort2="Mundo!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Neste exemplo, duas variáveis foram declaradas. Os conteúdos dessas variáveis devem ser exibidos no campo output.
<body onload="ausgabe()">
<form action="avaliacao.php" method="get" name="form">
<output name="campo" />
</form>
</body>
Navegadores como o Opera exibem o valor desejado. No entanto, navegadores que não conseguem lidar com o output não mostram nada.output possui três atributos.
• form – O formulário em que o elemento output está contido.
• for – Estabelece a relação com os campos ou valores para os quais o campo de saída se refere. Os valores e campos devem ser separados por espaços.
• name – Se um nome for fornecido, o conteúdo do campo será transmitido ao enviar o formulário.
• value – Indica o valor do campo.output também é útil para cálculos matemáticos. Por exemplo, pode-se solicitar valores através de campos de Prompt e depois multiplicá-los entre si.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Número 1.",0));
b=parseInt(prompt("Número 2.",0));
document.forms["form"]["resultado"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>O resultado da multiplicação:</label>
<output name="resultado" />
</output>
</form>
</body>
</html>Ao abrir a página, uma janela de Prompt é exibida para solicitar o primeiro valor.
Se a entrada for confirmada com OK, abre-se uma segunda janela. (Se um dos dois janelas clicar em Cancelar, o resultado será NaN,, ou seja, Not a Number).
Ao confirmar a entrada na segunda janela com OK, o script passa o resultado da multiplicação como valor para o campo output.
Barra de progresso com progress
Uma barra de progresso pode ser realizada por meio do elemento progress. Isso é útil, por exemplo, em relação ao download de arquivos..gif "HTML & CSS para iniciantes (Parte 16): Formulários (4)")
O Google já interpreta o elemento. Outros navegadores que não conhecem o elemento exibem seu conteúdo.
Um exemplo:
O download está em andamento ...
<progress value="250" max="1000">
<span id="progressoDownload">25</span>%
</progress>
O elemento progress conhece dois atributos:
• máximo – Define quantos passos são necessários no total.
• valor – Aqui é indicado quantos passos já foram concluídos.
O elemento progress se torna realmente interessante com a entrada do JavaScript. Como uma combinação de progress e JavaScript pode ser usada, é melhor demonstrar com um exemplo.
Neste exemplo, considera-se um formulário que deve ser preenchido em várias etapas. As seguintes informações são solicitadas sequencialmente:
• Nome
• Sobrenome
• Rua
• CEP
• Cidade
Agora é possível solicitar esses poucos valores em uma única página. Mas e se muitas informações do usuário precisarem ser obtidas? Nesse caso, formulários extensos podem ser intimidantes. Portanto, é melhor dividir os formulários em várias páginas.
Supondo que você abra o formulário.
Aqui você será solicitado a inserir seu primeiro nome. A barra de progresso abaixo do campo foi implementada usando o elemento progress.
<fieldset id="schritt1" style="display: none;"> <p>Nome: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Passo 1 / 5</progress></p> <p><input type="button" value="Próximo" onclick="naechserSchritt(2)"></p> </fieldset>
Vários elementos são essenciais nessa sintaxe. Os vários elementos fieldset são inicialmente definidos como invisíveis. Mesmo que a princípio não pareça, o formulário é de fato uma única página. Os campos individuais foram inseridos em elementos fieldset separados. E esses elementos fieldset (juntamente com seus conteúdos) não são visíveis.
Para tornar os elementos na verdade ocultos visíveis após clicar nos respectivos botões Próximo, é utilizada uma função JavaScript de switch. Como isso é feito será mostrado mais adiante neste tutorial.
Por enquanto, vamos voltar ao formulário. Ao clicar nos botões Próximo, você será guiado pelo formulário. Durante isso, os elementos progress mostram o progresso realizado.
Não é problema se um navegador não interpreta o elemento progress. Nesses casos, o navegador simplesmente exibe o conteúdo desse elemento.
<progress max="5" value="1">Passo 1 / 5</progress>
Em vez do indicador de progresso, você verá um texto no formato Passo 2 / 5.
O formulário se parece com isso:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Nome: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Passo 1 / 5</progress></p> <p><input type="button" value="Próximo" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Sobrenome: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Passo 2 / 5</progress></p> <p><input type="button" value="Próximo" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Endereço: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Passo 3 / 5</progress></p> <p><input type="button" value="Próximo" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>CEP: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Passo 4 / 5</progress></p> <p><input type="button" value="Próximo" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Cidade: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Passo 5 / 5</progress></p> <input type="submit" value="Final"> </fieldset> </form>
Aqui são três coisas essenciais:
• Cada elemento fieldset recebe uma ID.
• Todos os elementos fieldset são definidos como display: none.
• As funções naechsterSchritt(n) são atribuídas aos botões.
A função naechsterSchritt(n) é definida da seguinte forma:
<script>
/* <![CDATA[ */
function naechsterSchritt(n) {
switch(n) {
case 1:
document.getElementById('schritt1').style.display = "block";
break;
case 2:
document.getElementById('schritt1').style.display = "none";
document.getElementById('schritt2').style.display = "block";
break;
case 3:
document.getElementById('schritt2').style.display = "none";
document.getElementById('schritt3').style.display = "block";
break;
case 4:
document.getElementById('schritt3').style.display = "none";
document.getElementById('schritt4').style.display = "block";
break;
case 5:
document.getElementById('schritt4').style.display = "none";
document.getElementById('schritt5').style.display = "block";
break
default: break;
}
}
naechsterSchritt(1);
/* ]]> */
</script>
Esta função exibe o elemento fieldset atual e oculta os outros elementos fieldset. Certifique-se de definir a função após a definição dos campos. Portanto, é melhor colocá-la após o fechamento do <form>.
