Formulários

Elementos do Formulário

single-line text field

html 
<input type="text" name="cpf" />
<input type="text" name="cpf" />

required:

html
*
<input type="text" name="cpf" required />*
<input type="text" name="cpf" required />*

placeholder:

html 
<input type="text" name="cpf" placeholder="000.000.000-00" />
<input type="text" name="cpf" placeholder="000.000.000-00" />

value:

html 
<input type="text" name="cpf" value="000.000.000-00" />
<input type="text" name="cpf" value="000.000.000-00" />

MDN

label field

html 
<div>
  <label for="cpf">CPF:</label>
  <input type="text" name="cpf" id="cpf" />
</div>
<div>
  <label for="cpf">CPF:</label>
  <input type="text" name="cpf" id="cpf" />
</div>

MDN

password field

html 
<input type="password" name="password" />
<input type="password" name="password" />

MDN

radio button field

html 
<div>
  <input type="radio" name="sex" value="male" id="male" />
  <label for="male">masculino</label>
</div>
<div>
  <input type="radio" name="sex" value="male" id="male" />
  <label for="male">masculino</label>
</div>

radio group:

html

Sexo:

<div>
  Sexo:
  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
  <label for="masculino">masculino</label>
  <input type="radio" name="sexo" value="feminino" id="feminino" />
  <label for="feminino">feminino</label>
</div>
<div>
  Sexo:
  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
  <label for="masculino">masculino</label>
  <input type="radio" name="sexo" value="feminino" id="feminino" />
  <label for="feminino">feminino</label>
</div>

MDN

checkbox field

html 
<div>
  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
  <label for="condicoes">Você concorda com os termos...</label>
</div>
<div>
  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
  <label for="condicoes">Você concorda com os termos...</label>
</div>

radio group:

html

Linguagens:

<div>
  Linguagens:
  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
  <label for="javascript">Javascript</label>
  <input type="checkbox" name="linguagens" value="c" id="c" />
  <label for="c">C</label>
  <input type="checkbox" name="linguagens" value="java" id="java" />
  <label for="java">Java</label>
  <input type="checkbox" name="linguagens" value="python" id="python" />
  <label for="python">Python</label>
</div>
<div>
  Linguagens:
  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
  <label for="javascript">Javascript</label>
  <input type="checkbox" name="linguagens" value="c" id="c" />
  <label for="c">C</label>
  <input type="checkbox" name="linguagens" value="java" id="java" />
  <label for="java">Java</label>
  <input type="checkbox" name="linguagens" value="python" id="python" />
  <label for="python">Python</label>
</div>

MDN

button field

html 
<input type="button" name="submit" value="Create" />
<input type="submit" name="submit" value="Create" />
<button>Create</button>
<input type="button" name="submit" value="Create" />
<input type="submit" name="submit" value="Create" />
<button>Create</button>

MDN

file field

html 
<input type="file" name="file" />
<input type="file" name="file" />

MDN

range field

html 
<input type="range" name="number" min="1" max="100" step="1" />
<input type="text" name="number-value" value="20" size="3" />
<input type="range" name="number" min="1" max="100" step="1" />
<input type="text" name="number-value" value="20" size="3" />

MDN

number field

html 
<input type="number" name="number" />
<input type="number" name="number" />

MDN

date field

html 
<input type="date" name="date" />
<input type="date" name="date" />

MDN

email field

html 
<input type="email" name="email" />
<input type="email" name="email" />

MDN

multi-line text field

html 

<label for="message">Mensagem:</label><br />
<textarea name="message" id="message" rows="3" cols="60">
  digite uma mensagem
</textarea>
<label for="message">Mensagem:</label><br />
<textarea name="message" id="message" rows="3" cols="60">
  digite uma mensagem
</textarea>

MDN

combobox field

html 
<div>
  <label for="place">Estado:</label>
  <select name="place" id="place">
    <option value="PB">Paraíba</option>
    <option value="PE">Pernambuco</option>
  </select>
</div>
<div>
  <label for="place">Estado:</label>
  <select name="place" id="place">
    <option value="PB">Paraíba</option>
    <option value="PE">Pernambuco</option>
  </select>
</div>

MDN

Formulário

Formulário sem estilo

simple-form 
<main>
  <h1>Contato</h1>
  <form action="sucesso.html" method="post">
    <fieldset>
      <div>
        <label for="nome">Nome</label>
        <input type="text" id="nome" name="nome" required> *
      </div>
      <div>
        <label for="curso">Curso</label>
        <select name="curso" id="curso">
          <option value="" selected>escolha um curso</option>
          <option value="TSI">Sistemas para Internet</option>
          <option value="RC">Redes de Computadores</option>
        </select>
      </div>
    </fieldset>
    <input type="submit" value="Enviar">
  </form>
</main>
<main>
  <h1>Contato</h1>
  <form action="sucesso.html" method="post">
    <fieldset>
      <div>
        <label for="nome">Nome</label>
        <input type="text" id="nome" name="nome" required> *
      </div>
      <div>
        <label for="curso">Curso</label>
        <select name="curso" id="curso">
          <option value="" selected>escolha um curso</option>
          <option value="TSI">Sistemas para Internet</option>
          <option value="RC">Redes de Computadores</option>
        </select>
      </div>
    </fieldset>
    <input type="submit" value="Enviar">
  </form>
</main>

Formulário com Boostrap

bootstrap-form 
<main class="container">
  <h1>Contato</h1>
  <form action="sucesso.html" method="post">
    <div class="form-group">
      <label for="nome">Nome</label>*
      <input
        type="text"
        class="form-control"
        id="nome"
        name="nome"
        required
      />
    </div>
    <div class="form-group">
      <label for="curso">Curso</label>
      <select class="form-control" name="curso" id="curso">
        <option value="" selected>escolha um curso</option>
        <option value="TSI">Sistemas para Internet</option>
        <option value="RC">Redes de Computadores</option>
      </select>
    </div>
    <input type="submit" class="btn btn-primary" value="Enviar" />
  </form>
</main>
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous"
></script>
<main class="container">
  <h1>Contato</h1>
  <form action="sucesso.html" method="post">
    <div class="form-group">
      <label for="nome">Nome</label>*
      <input
        type="text"
        class="form-control"
        id="nome"
        name="nome"
        required
      />
    </div>
    <div class="form-group">
      <label for="curso">Curso</label>
      <select class="form-control" name="curso" id="curso">
        <option value="" selected>escolha um curso</option>
        <option value="TSI">Sistemas para Internet</option>
        <option value="RC">Redes de Computadores</option>
      </select>
    </div>
    <input type="submit" class="btn btn-primary" value="Enviar" />
  </form>
</main>
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous"
></script>

Bootstrap | Sign-in

Formulário com Tailwind

tailwind-form 
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
    <img
      class="mx-auto h-10 w-auto"
      src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
      alt="Your Company"
    />
    <h2
      class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
    >
      Sign in to your account
    </h2>
  </div>
 
  <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label
          for="email"
          class="block text-sm font-medium leading-6 text-gray-900"
          >Email address</label
        >
        <div class="mt-2">
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            required
            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
          />
        </div>
      </div>
 
      <div>
        <div class="flex items-center justify-between">
          <label
            for="password"
            class="block text-sm font-medium leading-6 text-gray-900"
            >Password</label
          >
          <div class="text-sm">
            <a
              href="#"
              class="font-semibold text-indigo-600 hover:text-indigo-500"
              >Forgot password?</a
            >
          </div>
        </div>
        <div class="mt-2">
          <input
            id="password"
            name="password"
            type="password"
            autocomplete="current-password"
            required
            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
          />
        </div>
      </div>
 
      <div>
        <button
          type="submit"
          class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Sign in
        </button>
      </div>
    </form>
 
    <p class="mt-10 text-center text-sm text-gray-500">
      Not a member?
      <a
        href="#"
        class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
        >Start a 14 day free trial</a
      >
    </p>
  </div>
</div>
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
    <img
      class="mx-auto h-10 w-auto"
      src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
      alt="Your Company"
    />
    <h2
      class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
    >
      Sign in to your account
    </h2>
  </div>
 
  <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label
          for="email"
          class="block text-sm font-medium leading-6 text-gray-900"
          >Email address</label
        >
        <div class="mt-2">
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            required
            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
          />
        </div>
      </div>
 
      <div>
        <div class="flex items-center justify-between">
          <label
            for="password"
            class="block text-sm font-medium leading-6 text-gray-900"
            >Password</label
          >
          <div class="text-sm">
            <a
              href="#"
              class="font-semibold text-indigo-600 hover:text-indigo-500"
              >Forgot password?</a
            >
          </div>
        </div>
        <div class="mt-2">
          <input
            id="password"
            name="password"
            type="password"
            autocomplete="current-password"
            required
            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
          />
        </div>
      </div>
 
      <div>
        <button
          type="submit"
          class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Sign in
        </button>
      </div>
    </form>
 
    <p class="mt-10 text-center text-sm text-gray-500">
      Not a member?
      <a
        href="#"
        class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
        >Start a 14 day free trial</a
      >
    </p>
  </div>
</div>

Tailwind UI | Sign-in and Registration

Editar esta página