Home
índice
Página anterior

Seletores para Formulários

Formulário Text
Radios Masculino Feminino
Password:
Checkbox: HTML CSS JQUERY
Select:
File:
Textarea:



No Html:

<form action= " formularios.html" method="get"> 
<fieldset>
<legend>Formulário</legend> 
Text      <input type="text" /> 
Radios   

<input type= "radio" name="sexo" value= "M" /> Masculino
<input type= "radio" name="sexo" value= "F" /> Feminino

Password: <input type="password" /> 
Checkbox: <input type="checkbox" />HTML<input type="checkbox"/>CSS 
<input type="checkbox" />JQUERY
Select:
<select id= "pais"> 
<option value= "BR" selected="selected">Brasil</option> 
<option>Bolívia</option> 
<option>EUA</option> 
<option disabled="disabled">Portugal</option> 
<option disabled="disabled">França</option> 
</select>

File: <input type="file" id="curriculo" />
Textarea:
<textarea rows="6" ="40" tabindex="1">Escreva aqui...</textarea> 

<input type="submit" value="Submit" /> 
<input type="reset"  value="Reset" /> 
<input type="button" value="Button" /> 

</fieldset>

A lista abaixo descrita tem a finalidade de recuperar elementos de um formulário. Nela está contido o seletor input, um seletor genérico, que recupera qualquer elemento do tipo input. Na documentação da jQuery em Seletors encontra-se em form, a lista completa de seletores para formulários. Para localizar um elemento de um tipo específico, por exemplo um radio, pode-se usar o seletor resumido.

Seletores para Formulários

:input  <input /> 

:text       <input type="text" /> 
:password   <input type="password" /> 
:radio      <input type="radio" /> 
:checkbox   <input type="checkbox" /> 
:submit     <input type="submit" /> 
:image      <input type="image" /> 
:reset      <input type="reset"/> 
:button     <input type="button" /> 
:file       <input type="file" /> 
:hidden     <input type="hidden" />

Seletor Genérico

Ao clicar em Button aparece uma borda azul em todos os elementos do tipo input. A função utilizada foi a css.

	
No javaScript:
    $(document).ready(function(){
	$(":input").css("border", "3px solid red");
});

Elemento Específico

No javaScript:	
    $(document).ready(function(){
	$(":button").click(function(){
	$(":text").css("border", "3px solid blue");
});
});	

	
No javaScript:
   $(document).ready(function(){
	$(":input").click(function(){
	$(":password").css("border", "3px solid blue"); //password com contorno azul.
});
});

Para recuperar um campo do tipo input file

No javaScript:
$(document).ready(function(){
$(":button").click(function(){
$(":file").css("border", "3px solid green"); //file com contorno verde.
});
});

Elementos Habilitados

Ao clicar em button, os elementos habilitados aparecerão com as bordas contornadas em amarelo.

No javaScript:
    $(document).ready(function(){
$(":button").click(function(){
	$(":enabled").css("border", "3px solid yellow");
});
});

Elementos Desabilitados

Ao clicar em button, os elementos desabilitados aparecerão com as bordas contornadas em amarelo. Aqui, Portugal e França. Funcionou apenas no firefox.

No javaScript:
$(document).ready(function(){
$(":button").click(function(){
$(":disabled").css("border", "3px solid yellow");
});
});

Elementos Checados

No javaScript:
$(document).ready(function(){
$(":button").click(function(){
$(":checked").parent()
.css("border", "3px solid yellow");
});
});

$(document).ready(function(){
$(":button").click(function(){
$(":selected")
.css("border", "3px solid yellow");
});
});