Formulário de entrada
Melhores Marcadores
Formulário de entrada
Exemplo
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</label>
<input class="w3-input" type="text">
</form>
Tente você mesmo " Etiquetas de fundo
Formulário de entrada
Exemplo
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
Tente você mesmo " Cartões de entrada
Cabeçalho
Exemplo
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> Tente você mesmo " Etiquetas verdes
Etiquetas com class = "rótulo w3" são verdes por padrão:
Exemplo
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> Tente você mesmo " validando Labels
etiquetas de validação são o vermelho, e fica verde quando a entrada se torna válido.
Para tornar os rótulos de validação, adicionar uma classe w3-validar a sua classe-label w3.
Exemplo
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> Tente você mesmo " etiquetas coloridas
Use qualquer uma das classes w3-text-color para colorir as suas etiquetas:
Exemplo
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> Tente você mesmo " Entrada delimitada
Adicione a classe w3-border para criar entradas com limites:
arredondada Fronteiras
Use qualquer uma das classes w3-redondas para criar bordas arredondadas:
Exemplo
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> Tente você mesmo " Entrada sem fronteiras
A classe w3-entrada tem uma borda inferior, por padrão. Se você quer uma entrada sem margens, adicionar a classe w3-border-0:
Exemplo
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> Tente você mesmo " cores
Sinta-se livre para usar seus estilos e cores favoritos:
Formulário de entrada
Exemplo
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> Tente você mesmo " entradas Hoverable
As classes de cor w3-hover- adiciona uma cor de fundo do campo de entrada de mouse:
Exemplo
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
Tente você mesmo " Entradas animados
A classe-animado-input w3 transforma a largura de um campo de entrada para 100% quando se obtém o foco:
Exemplo
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> Tente você mesmo " Exemplo
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label> Tente você mesmo " Selecione as opções
Exemplo
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> Tente você mesmo " Ladeado Seleccione Menu
Elementos de formulário em uma grade
Neste exemplo, usamos Sistema Interligado Responsive W3.CSS 'para fazer as entradas aparecem na mesma linha (em telas menores, eles serão empilhados horizontalmente, com largura de 100%). Você aprenderá mais sobre isso mais tarde.
Exemplo
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Tente você mesmo " Dois layout da coluna com rótulos:
Exemplo
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Tente você mesmo "