Capítulo 5

Formulários

Criado por: Malcon Toledo

Fucionamento Básico

tags:

form input label button

Atributos:

placeholder required maxlength pattern title id name

Tags form , input e button




 

   
   
 

 

   
   
 

 

   
 





.form div{
  display: block;
}
.form input {
  padding:5px;
  margin-bottom: 5px;
}
.form div label{
  width: 100px; display: inline-block;
}
.enviar button {
  margin: 15px 0px 0px 0px;
  padding: 10px;
}

Atributos placeholder e required

placeholder e required

Atributos pattern, maxlength e title

pattern, maxlength e title

Novos Tipos de Campos no HTML 5

Input type:

date datetime-local month time week color email tel search range number url

<input type="date">

<input type="datetime-local">

<input type="month">

<input type="time">

<input type="week">

<input type="color">

<input type="email">

<input type="tel">

<input type="range">

<input type="number">

<input type="url">

Demais Campos de Formulário

Tags:

textarea checkbox radio select

<textarea>

checkbox 

	

Escolha suas áreas de interesse:

Escolha suas áreas de interesse:

radiobox 

	

Escolha uma área de interesse:

Escolha uma área de interesse:

combobox <select>

<select multiple >

Tabelas

Tags:

table tr td th tbody thead tfoot

Atributos:

colspan rowspan

Propriedades:

border-collapse

Estrutura básica de uma tabela




 

     
  Produto
  Valor   
 

 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 

  
  Total   
  25,00
 






td{
  border: solid 2px #777;
}

Propriedade border-collapse

Propriedade border-collapse




 

     
  Produto
  Valor   
 

 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 

  
  Total   
  25,00
 






table{
  border-collapse: collapse;
}
td{
  border: solid 2px #777;
}

Tags <thead> <tbody> <tfoot> 




 
 

     
  Produto
  Valor   
 

 
 
 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 
 
 

  
  Total   
  25,00
 

 





table{
  border-collapse: collapse;
}
td{
  border: solid 1px #b9b9b9;
  width: 100px;
  height: 40px;
}
thead {
  background-color: #2d8572;
  color: #fff;
}
tbody{
  background-color: #dfdfdf;
}
tfoot {
  background-color: #363636;
  color: #fff;
}

Tag <th> 




 
 

     
  Produto
  Valor   
 

 
 
 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 
 
 

  
  Total   
  25,00
 

 





table{
  border-collapse: collapse;
}
td{
  border: solid 1px #b9b9b9;
  width: 100px;
  height: 40px;
}
thead {
  background-color: #2d8572;
  color: #fff;
}
tbody{
  background-color: #dfdfdf;
}
tfoot {
  background-color: #363636;
  color: #fff;
}
th {
  border: solid 1px #b9b9b9;
  font-family: 'Segoe UI';
  font-weight: 600;
}

Estilizando colunas 




 
 

     
  Produto
  Valor   
 

 
 
 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 
 
 

  
  Total   
  25,00
 

 





table{
  border-collapse: collapse;
}
td{
  border: solid 1px #b9b9b9;
  width: 100px;
  height: 40px;
}
thead {
  background-color: #2d8572;
  color: #fff;
}
tbody{
  background-color: #dfdfdf;
}
tfoot {
  background-color: #363636;
  color: #fff;
}
th {
  border: solid 1px #b9b9b9;
  font-family: 'Segoe UI';
  font-weight: 600;
}
tr td:nth-child(1){
  width: 20px;
}
tr td:nth-child(3){
  text-align: right;
  padding-right: 10px;
}

Tags <colspan> <rowspan> 




 
 

  Produto
  Valor   
 

 
 
 

  1
  Tomate
  10,00   
 

 

  2
  Suco   
  15,00
 

 
 
 

  Total   
  25,00
 

 





table{
  border-collapse: collapse;
}
td{
  border: solid 1px #b9b9b9;
  width: 100px;
  height: 40px;
  padding-left: 10px;
}
thead {
  background-color: #2d8572;
  color: #fff;
}
tbody{
  background-color: #dfdfdf;
}
tfoot {
  background-color: #363636;
  color: #fff;
}
th {
  border: solid 1px #b9b9b9;
  font-family: 'Segoe UI';
  font-weight: 600;
  height: 40px;
}
tr > th {
  padding: 0px 10px 0px 10px;
}
tr td:nth-child(3){
  text-align: right;
  padding-right: 10px;
}
tfoot tr td:nth-child(2){
  text-align: right;
  padding-right: 10px;
}