Capítulo 13

Propriedades do objeto form - Exemplo 1

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, msg, mensagem, elBotao;
	el = document.getElementsByTagName("form");
	msg = document.getElementById("msg");
	elBotao = document.getElementById("btn");	
	mensagem = "<h3>Atributos do primeiro elemento <code>form</code> do documento</h3>";
	mensagem += "<ul>";
	mensagem += "<li>name= " + el[0].name + "</li>";
	mensagem += "<li>action= " + el[0].action + "</li>";
	mensagem += "<li>method= " + el[0].method + "</li>";
	mensagem += "<li>target= " + el[0].target + "</li>";
	mensagem += "</ul>";	
	mensagem += "<h3>Atributos do segundo elemento <code>form</code> do documento</h3>";
	mensagem += "<ul>";
	mensagem += "<li>name= " + el[1].name + "</li>";
	mensagem += "<li>action= " + el[1].action + "</li>";
	mensagem += "<li>method= " + el[1].method + "</li>";
	mensagem += "<li>target= " + el[1].target + "</li>";
	mensagem += "</ul>";	
	elBotao.onclick	= function() {
		msg.innerHTML = mensagem;
	}
}
<script>

HTML

...
<form name="form1" action="http://livrojavascript.com.br" method="post" target="_blank">
<fieldset>
<legend>Formulário 1</legend>
<label for="nome">Nome:</label><br />
<input type="text" name="nome" id="nome" accept="text/plain" /><br /><br />
<label for="cidade">Cidade:</label><br />
<select title="Selecione uma cidade" name="cidade" id="cidade">
<option value="">Escolha uma cidade</option>
<option value="rio">Rio de Janeiro</option>
<option value="sp">São Paulo</option>
</select><br /><br />
<label for="senha">Senha:</label><br /> 
<input type="password" name="senha" id="senha" /><br /><br />
<input type="submit" value="Enviar" />
</fieldset>
</form>

<form name="form2" action="processa.php" method="get" target="_top">
<fieldset>
<legend>Formulário 2</legend>
Idade:<br />
<input class="input" type="radio" title="Escolha uma opção" name="idade" id="menos30" value="menos30" /><label for="menos30"> Menos de 30 anos</label><br />
<input class="input" type="radio" title="Escolha uma opção" name="idade" id="mais30" value="mais30" /><label for="mais30"> Mais de 30 anos</label><br />
</fieldset>
</form>

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








Formulário 2 Idade: