Capítulo 13

Propriedades do objeto input - Exemplo 1

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, msg, elBotao, mensagem; 
	el = document.getElementsByTagName("input");
	msg = document.getElementById("msg");
	elBotao = document.getElementById("btn");	
	mensagem = "<h3>Propriedades do elemento <code>input</code></h3>";
	mensagem += "<ul>";
	mensagem += "<li> Quantidade: " + el.length;
	mensagem += "<li> Atributo type: " + el["sexo"].type + "</li>";
	mensagem += "<li> Atributo tabindex: " + el["az"].tabIndex + "</li>";
	mensagem += "</ul>";	
	elBotao.onclick	= function() {
		msg.innerHTML = mensagem;
	
		el["am"].disabled = true;
		el["fem"].checked = true;
		el["nome"].value = "Seu nome aqui";
		el["nome"].style.background = "yellow";	
	}
}
<script>

HTML

...
<form action="" method="post" name="form1" id="form1">
<fieldset>
<legend>Formulário com input</legend>
<label for="nome">Nome:</label><br />
<input type="text"  name="nome" id="nome" /><br />
<label for="senha">Senha:</label><br />
<input type="password"  name="senha" id="senha" /><br />
Sexo:<br />
<input class="input" type="radio" name="sexo" id="masc" value="masc"  />
<label for="masc">Masculino</label>
<input class="input" type="radio" name="sexo" id="fem" value="fem" />
<label for="fem">Feminino</label><br />

Cor preferida:<br />
<input class="input" type="checkbox"  name="vm" id="vm" value="vm" />
<label for="vm">vermelha</label>
<input class="input" type="checkbox"  name="vd" id="vd" value="vd" checked="checked" />
<label for="vd">verde</label>
<input class="input" type="checkbox"  name="az" id="az" value="az" tabindex="3"/>
<label for="az">azul</label>
<input class="input" type="checkbox"  name="am" id="am" value="am" />
<label for="am">amarela</label><br />
<input type="reset" value="Limpar" />
<input type="submit" value="Enviar" />
</fieldset>
</form>

<div id="msg"></div>
<button type="button" id="btn">Rodar Script</button>
...
Formulário com input



Sexo:

Cor preferida: