Sítios Web I

<html> Formulário (form e input)

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

Formulário <form>

Bom artigo de form com HTML 5
Atributos HTML 5

▼

Marcação PRINCIPAL e atributos

<form action="dados.php" method="get"> ... </form>

  • action: Para onde vai os dados
  • method: Como vai os dados (get ou post)

Dentro do form

  1. <input>
  2. <textarea>
  3. <button>
  4. <select>
  5. <option>
  6. <optgroup>
  7. <fieldset>
  8. <label>
  9. <datalist>
  10. <output>

Dentro do form

Elementos de entrada de dados: <input>

SEMPRE com o atributo name

▼

input - Text

<input type="text" name="" /> 


<form>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

input - Password

<input type="password" name="" /> 


<form>
  Password: <input type="password" name="pwd">
</form>

input - Radio Buttons

<input type="radio" name="" /> 


<form>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</form>

input - Checkboxes

<input type="checkbox" name="" /> 


<form>
  <input type="checkbox" name="vehicle[]" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car">I have a car
</form>

05:00

input - File

<input type="file" name="" /> 


<form name="input" action="html_form_action.asp" method="get">
  File: <input type="file" name="arquivo">
</form>

input - number

<input type="number" name="quantity" min="1" max="5">

input - data


<input type="date" name="bday1">

<input type="date" name="bday2" max="1979-12-31"><br/>
<input type="date" name="bday3" min="2000-01-02"><br/>

input - range

<input type="range" name="points" min="0" max="10">

input - color

<input type="color" name="favcolor">

input - email

Mais utilizado para smartphone

<input type="email" name="email">

input - url

Mais utilizado para smartphone

<input type="url" name="homepage">

input - Submit

Não precisa do atributo name

<input type="submit" value="" /> 


<form name="input" action="html_form_action.asp" method="get">
  Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

datalist

Oferece algumas opções pré-definidas para input
O atributo list do elemento input, deve referir-se ao atributo id do elemento datalist. 


<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

output

O elemento output representa o resultado de um cálculo ou uma saída. 

<form action="#"
      oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
</form>

05:00

textarea


<textarea rows="4" cols="50" name="">
  At w3schools.com you will learn how to make a website. 
  We offer free tutorials in all web development technologies. 
</textarea>

Atributos:

  • cols: Número da largura visíveis
  • rows: Número de linhas visíveis
  • disabled: Desativa a área de texto
  • readonly: Apenas para leitura, não deixa escrever

button

<button type="button" name="">Click Me!</button>
  • disabled: Desativa a área de texto
  • type:
    • button
    • reset
    • submit

select e option


  <select>
    <option name="" value="volvo">Volvo</option>
    <option name="" value="saab">Saab</option>
    <option name="" value="mercedes">Mercedes</option>
    <option name="" value="audi">Audi</option>
  </select>
  • disabled: Desativa a área de texto
  • size: Número de opções visíveis
  • multiple: Habilita a possibilidade de escolher múltiplos itens ao mesmo tempo
▼

optgroup


<select>
  <optgroup label="Swedish Cars">
    <option name="" value="volvo">Volvo</option>
    <option name="" value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option name="" value="mercedes">Mercedes</option>
    <option name="" value="audi">Audi</option>
  </optgroup>
</select>

fieldset


<form>
  <fieldset>
    <legend>Dados:</legend>
    Name: <input type="text"><br>
    E-mail: <input type="text"><br>
    Aniversário: <input type="text">
  </fieldset>
</form>

label


<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link