-
Notifications
You must be signed in to change notification settings - Fork 1
Formulários HTML
Formulários HTML5 não são tão ruins quanto dizem. Possuem boas funções que fazem o uso de códigos .js serem mais úteis para casos mais especiais.
MDN - Documentação completa sobre formulários.
O propósito de um formulário é enviar dados. Para isso ele faz uso dos métodos GET e POST, que enviam dados utilizando um key-value pair (par chave-valor), que são fornecidos pelos atributos name e value dos elementos do formulário.
-
GET: Envia uma requisição ao browser utilizando os key-value pair como parâmetros visíveis na URL. Normalmente é utilizado para um formulário de pesquisa. Não deve ser utilizado para transmissão de dados sensíveis.
-
POST: Envia dados por "debaixo dos panos" ao servidor. Os dados transmitidos não são visíveis na URL. É utilizado para transmitir dados, de forma geral, como um cadastro em um site, finalização de compra, etc.
Exemplo de URL com parâmetros gerados por um formulário do tipo GET:
domain.com/form?name=value
# exemplo
domain.com/form?user_name=Pedro&user_job=frontend-developer
A ? separa a URL dos parâmetros. O & separa os pares key-value. Ambos são gerados automaticamente pelo browser.
<form><input><textarea><button><label><fieldset><legend><select><option><optgroup>
Paired tag. Delimita a área de um formulario. Contém todas as outras tags citadas.
methodaction
Self-closing tag. Cria a maioria dos elementos interativos de um formulário, como campos de texto, email, telefone, senha, etc.
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="image">
<!-- HTML5 -->
<input type="number">
<input type="email">
<input type="tel">
<input type="time">
<input type="url">
<input type="date">
<input type="color">
<!-- para ver todos os types, ver link acima -->typenamevalueplaceholdertitlepattern
Paired tag. Cria uma área de texto de mais de uma linha.
Paired tag. Cria um botão, normalmente para enviar ou resetar o formulário.
<button type="submit">Submit form</form>
<button type="reset">Reset form</form>Paired tag. Cria uma etiqueta que pode referenciar um elemento do formulário
utilizando o atributo id desse elemento. Exemplo:
<label for="id-do-elemento"></label>
<input type="text" id="id-do-elemento">for
Paired tag. Serve para dividir logicamente/semanticamente as seções de um formulário.
Paired tag. Serve para dar um título ou legenda a uma determinada seção do formulário. Normalmente vem após o elemento <fieldset>. Não precisa referenciar.
Paired tag. Delimita a área de um menu dropdown. Deve ser populada com elementos <option>.
name
Paired tag. Cria os elementos selecionáveis de um menu dropdown. Só precisa do atributo value, pois o name é definido no elemento <select>
value
Paired tag, com opção de fechamento opcional. Serve para ajudar a organizar a disposição de itens dentro de um menu dropdown. Cria texto visível dentro do menu, mas não pode ser selecionado.
O texto deve ser inserido com o atributo label.
label
Para mais informações, ver a documentação MDN sobre atributos.
idnamevaluetyperequireddisabledreadonlyplaceholdercheckedautofocusautosavepatterntitleacceptmaxmaxlengthstep
<!-- form start-->
<form action="index.html" method="POST">
<h1>Sign Up!</h1>
<!-- fieldset 1 -->
<fieldset>
<legend><span class="number">1</span> Your basic info</legend>
<!-- Name field -->
<label for="name">Name</label>
<input type="text" id="name" name="user_name" placeholder="Your name">
<!-- Email field -->
<label for="mail">Email</label>
<input type="email" id="mail" name="user_email" placeholder="Your Email">
<!-- Password field -->
<label for="password">Password</label>
<input type="password" id="password" name="user_password" placeholder="Your password" title="At least 8 carachters"pattern="\d{8,50}">
<p style="font-size: 80%;">*at least 8 characters long</p>
<!-- Age radio buttons -->
<label>Age</label>
<input type="radio" id="under_13" value="under_13" name="user_age">
<label for="under_13" class="light">Under 13</label><br>
<input type="radio" id="over_13" value="over_13" name="user_age">
<label for="over_13" class="light">13 or more</label><br>
</fieldset>
<!-- fieldset 2 -->
<fieldset>
<legend><span class="number">2</span> More about you</legend>
<label for="bio">Biography</label>
<textarea id="bio" name="user_bio" placeholder="Your bio..."></textarea>
<!-- job role dropdown -->
<label for="job">Your Job Role</label>
<select id="job" name="user_job">
<optgroup label="Web">
<option value="fontend_developer">Frontend Developer</option>
<option value="ruby_developer">Ruby Developer</option>
<option value="php_developer">PHP Developer</option>
<option value="wordpress_developer">Wordpress Developer</option>
</optgroup>
<optgroup label="Mobile">
<option value="ios_developer">iOS Developer</option>
<option value="android_developer">Android Developer</option>
</optgroup>
</select>
<!-- Interests checkbox -->
<label for="interests">Your Interests</label>
<input type="checkbox" id="interests_coding" name="user_interest" value="coding">
<label for="interests_coding" class="light">Coding</label>
<br>
<input type="checkbox" id="interests_space" name="user_interest" value="space">
<label for="interests_space" class="light">Space</label>
<br>
<input type="checkbox" id="interests_trains" name="user_interest" value="trains">
<label for="interests_trains" class="light">Trains</label>
<br>
</fieldset>
<!-- Submit buttons -->
<button type="submit">Sign Up!</button>
<!-- <input type="submit"> também é válido -->
<button type="reset">Reset form</button>
</form>