Ir para o conteúdo

Formulários

Um formulário é utilizado para coletar dados do usuário. Geralmente os dados são enviados para um servidor para ser processado.

<form>

</form>

Elemento input

O elemento input é um dos campos mais utilizados para coletar os dados do usuário. O elemento input permite informar uma gama diferente de informações. O atributo type define o tipo de campo e layout.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

O layout e tipo de informação do campo depende do navegador utilizado. Caso o navegador não suportar, o campo input assume o tipo text.

Atributos do input

O elemento input possui os atributos id, name, value e placeholder.

<input
    type="text"
    id="nome"
    name="nome"
    value="João"
    placeholder="Digite seu nome">
AtributoDescrição
idIdentifica unicamente o elemento na página. É muito usado para CSS, JavaScript e associação com <label>.
nameDefine o nome do campo enviado ao servidor quando o formulário é submetido.
valueDefine o valor inicial do campo ou o valor associado ao input.
placeholderExibe um texto de exemplo ou dica dentro do campo enquanto ele estiver vazio.

Labels

O elemento label define um texto para explicar qual conteúdo deve ser informado em um campo de formulário (input).

O label é associado a um input por meio do atributo for, cujo valor deve ser igual ao atributo id do input correspondente.

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome">