Exercício – Eventos com Javascript

Exercício: Fazer com que o formulário só seja exibido após o clique no link “Comente esta matéria”.

Copie o código abaixo (utilize o link copy to clipboard) e cole dentro do body em um novo arquivo HTML:

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris est. Proin quis tellus ac eros porta hendrerit. Proin risus ligula, ullamcorper et, egestas vel, fermentum ac, enim. Nunc consectetuer, urna a gravida eleifend, magna risus bibendum dui, ut tincidunt nunc ante eget dui. Nullam consequat nulla sit amet metus. Aenean tempor. Sed dolor. Donec fermentum mauris mollis velit. Quisque nec mi eu ipsum imperdiet iaculis. Pellentesque luctus, sapien et porta egestas, ante est sollicitudin nunc, quis condimentum elit elit volutpat augue. Donec eget lacus. Sed id arcu non nibh nonummy ullamcorper. Aenean at turpis. </p>
<p>Donec viverra nisl eget mi. Quisque sit amet quam. Nulla bibendum, turpis in pretium tincidunt, purus arcu nonummy sem, eu elementum massa ante non leo. Praesent at nunc. Donec mauris. In ac elit. Nunc justo lorem, aliquam quis, dapibus at, gravida eu, turpis. Duis at dui sed sem tempor pharetra. Suspendisse justo nunc, sollicitudin condimentum, tristique eu, mollis imperdiet, eros. Donec ultrices lobortis arcu. Vivamus feugiat turpis eget lorem. Sed nec lorem. Cras facilisis. Sed mattis metus ut lectus. Duis metus augue, cursus lobortis, molestie a, interdum fermentum, libero. Cras nec mi. Aenean sapien est, mattis id, suscipit ut, iaculis sodales, justo. Nam a massa. Maecenas posuere, risus tincidunt vestibulum lacinia, nisi libero congue ligula, a placerat leo tortor eu mauris. Donec lacinia rhoncus libero. </p>
<p>Pellentesque tempor. Nam viverra consequat purus. Praesent luctus molestie sem. Suspendisse potenti. Maecenas nonummy, tortor eu ullamcorper volutpat, turpis velit convallis libero, vel feugiat dui justo quis augue. Donec sollicitudin venenatis massa. Integer aliquet, elit non suscipit congue, urna pede consectetuer ipsum, vestibulum ultricies enim metus scelerisque ante. Quisque convallis, neque ut vulputate viverra, leo justo nonummy nisl, id fermentum quam dolor sit amet nisl. Fusce posuere faucibus est. Mauris libero elit, congue quis, eleifend fermentum, pharetra eget, eros. Curabitur elementum nunc in neque. Mauris porta, risus ut dapibus porttitor, pede nibh imperdiet ligula, a facilisis neque arcu quis elit. Pellentesque arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porttitor. Phasellus elit augue, tincidunt quis, aliquet vel, vulputate sit amet, arcu. Nam pellentesque turpis. Sed eget augue nec enim pharetra fermentum. Quisque interdum placerat erat. Aenean aliquam, erat id cursus sodales, leo dolor interdum massa, in vulputate ligula nulla sed urna. </p>
<p>Mauris cursus egestas tellus. Curabitur odio urna, tincidunt non, condimentum ac, pharetra vitae, ante. Morbi sed nulla. Maecenas orci. Quisque erat. Duis ut leo. Mauris fringilla consectetuer mi. Aenean cursus. Nulla sollicitudin sodales nibh. Morbi varius, nibh id ornare dignissim, felis dolor gravida nibh, ut dapibus eros purus vel justo. </p>
<p>Sed augue. Mauris lobortis lorem in pede. In mi libero, pellentesque in, luctus ac, molestie sed, nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sollicitudin. Nam nisi. Maecenas risus magna, sodales sit amet, gravida sollicitudin, eleifend eu, metus. Duis sagittis magna. Donec nonummy nulla et urna. Vivamus feugiat sem sit amet massa. Quisque arcu mi, rhoncus dictum, pretium eget, euismod in, odio. In vulputate elit in lacus. Proin mauris justo, imperdiet ut, accumsan quis, facilisis quis, metus. Duis vehicula, lorem scelerisque vestibulum accumsan, dolor enim laoreet purus, non sagittis eros sem ut nibh. In imperdiet massa bibendum nibh. Maecenas feugiat nunc sit amet lacus. Donec sapien massa, aliquet in, congue at, egestas non, dolor. Suspendisse elit augue, laoreet ac, blandit ac, viverra ut, odio.</p>
<p><a href=";" mce_href=";">Comente esta mat&eacute;ria</a></p>
<form name="form" method="post" action="">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><label for="label">Nome:</label></td>
<td><label for="textfield"></label>
</td>
</tr>
<tr>
<td><label for="label">E-mail:</label></td>
<td></td>
</tr>
<tr>
<td><label for="label">Comentários:</label></td>
<td><textarea name="comentarios" cols="40" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label for="Submit"></label>

<label for="label"></label>
&nbsp;

</div></td>
</tr>
</table>
</form>

Solução:

1 – Utilizar CSS para ocultar o formulário:

<form name="form" method="post" action="" style="display:none">

2 – Definir evento “Ao Clicar” (onclick) no link:

<p><a href=";" mce_href=";" onclick="document.form.style.display='block'">Comente esta mat&eacute;ria</a></p>

Obs.: Poderia ser usada a propriedade visibility (com valores hidden ou visible) ao invés de display, mas os resultados seriam ligeiramente diferentes. Tente você mesmo!