Entrada e saída

Trabalhar com os métodos window.alert() e window.prompt() para ler e exibir dados pode ser bem fácil e prático, porém nada bonito. A ideia é sair o mais rápido possível disso e partir para os formulários. Mas como compreender esta abordagem logo de início, se não soubermos trabalhar com eventos e funções? Então, após aprendermos a utilizar funções em JS, precisamos entender a estrutura de um arquivo HTML, saber usar os elementos <input> e <div>, o evento onclick e o método document.getElementById(). Pronto! Sabendo usar estes 4 elementos, estaremos preparados para construir scripts muito mais amigáveis. Um próximo passo seria o "embelezamento" da nossa UI, porém, fica como lição de casa estudar as folhas de estilo, ou CSS.

Fiz um pequeno script para demonstrar o uso dos forms. Foi o mais simples que consegui, sem perder o charme. Fique à vontade para testá-lo:

Como fica:

Mostra o resultado aqui!

Os códigos

1. script:

function copiar(){
    document.getElementById('saida1').innerHTML = 'Você digitou: '+document.getElementById('texto1').value;
}

2. formulário:

<form>
	<input id='texto1' type='text' placeholder='texto inicial'>
	<input id='botao1' onclick="copiar();" type='button' value='ok'>
	<div id='saida1'>Mostra o resultado aqui!</div>
</form>

Mostra o resultado aqui!

3. estilo:

form {
	background-color: moccasin;
	padding: 10px;
	border-radius: 5px;
}

E aí? Você já sabe criar uma função no JS? Se sim, já pode se aventurar pelos formulários. Sugiro primeiro entender como funciona a estrutura de um arquivo HTML. Tente criar um formulário responsivo. Se está com dificuldades, poste aqui nos comentários. Se tiver sugestões para o blog, poste também. Se quiser falar sobre outros assuntos, fique a vontade para postar qualquer coisa!