Guia de aprendizado
Design responsívo: formulários
Formulários são utilizados para prover coleta de dados dos usuários, seja para armazená-los em um banco de dados, para autenticação ou qualquer outro procedimento a ser realizado do lado do servidor.
Sketch aplicou estilos simples aos componentes dos formulários para torná-los responsívos. Você pode criar estilos mais criativos para esses componentes, dado que o framework Sketch fornece um rascunho de design para o layout de um website. Veja o exemplo abaixo
<div class="container"> <form> <p class="text-bold"> Nome: <br/> <input type="text" id="userName" name="userName"> </p> <p class="text-bold"> Senha: <br/> <input type="password" id="userPassword" name="userPassword"> </p> <p class="text-bold"> Sexo: <br/> <select id="userGenre" name="userGenre"> <option> Feminino </option> <option> Masculino </option> </select> </p> <p class="text-bold"> Interesses: <br/> <input type="checkbox" id="interest1" name="interest1" value="courses"> cursos<br/> <input type="checkbox" id="interest2" name="interest2" value="fun"> diversão<br/> <input type="checkbox" id="interest3" name="interest3" value="other"> outro<br/> </p> <p class="text-bold"> Trabalha com Tecnologia da Informação? <br/> <input type="radio" id="answer-1" name="answer" value="yes" checked> Sim<br/> <input type="radio" id="answer-2" name="answer" value="no"> Não<br/> </p> <p class="text-bold"> Faça uma breve descrição de você: <br/> <textarea id="userDescription" name="userDescription" ></textarea> </p> <p> <input type="button" id="btnPost" value="Cadastrar"> <input type="reset" id="btnReset" value="Limpar dados"> </p> </form></div>Esse código irá resultar nos seguintes conteúdos: