tacitochaves/cad_cli.html

## cad_cli.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tela de Cadastro de Cliente - Pessoa Física</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      width: 75%;
      margin: 60px auto;
      border: 1px solid #ccc;
      padding: 15px;
      box-sizing: border-box;
    }
    fieldset {
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
      background-color: #F0F0F0;
    }
    fieldset legend {
      font-family: Verdana, Arial;
      font-size: 14px;
    }
    section {
      display: block;
      margin-bottom: 10px;
    }
      fieldset label, fieldset input {
      font-family: Verdana, Arial;
      font-size: 12px;
    }
    fieldset label {
      display: inline-block;
      width: 70px;
    }
    fieldset input, fieldset select {
      border: 1px solid #999;
      box-sizing: border-box;
      display: inline-block;
      padding: 4px;
    }
    fieldset input[type="text"], fieldset input[type="date"] {
      margin-right: 10px;
    }
    #nome-cli, #endereco-cli, #cidade-cli {
      width: 80%;
    }
    #sexo-cli {
      width: 175px;
      position: relative;
      left: -20px;
    }
    #celular-cli {
      position: relative;
      left: -20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <form method="get" name="frm-cli" id="frm-cli">
      <fieldset>
        <legend>Cadastro de clientes</legend>
        <section>
          <label for="cod-cli">Código</label>
          <input type="text" name="cod-cli" id="cod-cli" />
          <input type="checkbox" name="tipo-cli" id="tipo-cli" style="vertical-align: middle;"/>
          <label for="tipo-cli">Empresa</label>
        </section>
        <section>
          <label for="nome-cli">Nome</label>
          <input type="text" name="nome-cli" id="nome-cli" />
        </section>
        <section>
          <label for="data-nasc-cli">Data Nasc.</label>
          <input type="date" name="nome-cli" id="data-nasc-cli" />
          <label for="sexo-cli">Sexo</label>
          <select id="sexo-cli">
            <option value="Selecione um sexo" default>Selecione um sexo</option>
            <option value="M">Masculino</option>
            <option value="F">Feminino</option>
          </select>
          <label style="font-weight: bold;">29 anos</label>
        </section>
        <section>
          <label for="telefone-cli">Telefone</label>
          <input type="text" name="telefone-cli" id="telefone-cli" />
          <label for="celular-cli">Celular</label>
          <input type="text" name="celular-cli" id="celular-cli" />
        </section>
        <section>
          <label for="endereco-cli">Endereço</label>
          <input type="text" name="endereco-cli" id="endereco-cli" />
        </section>
        <section>
          <label for="cidade-cli">Cidade</label>
          <input type="text" name="cidade-cli" id="cidade-cli" />
        </section>
      </fieldset>
    </form>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Tela de Cadastro de Cliente - Pessoa Física</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	}
	.container {
	width: 75%;
	margin: 60px auto;
	border: 1px solid #ccc;
	padding: 15px;
	box-sizing: border-box;
	}
	fieldset {
	border: 1px solid #ccc;
	padding: 10px;
	box-sizing: border-box;
	background-color: #F0F0F0;
	}
	fieldset legend {
	font-family: Verdana, Arial;
	font-size: 14px;
	}
	section {
	display: block;
	margin-bottom: 10px;
	}
	fieldset label, fieldset input {
	font-family: Verdana, Arial;
	font-size: 12px;
	}
	fieldset label {
	display: inline-block;
	width: 70px;
	}
	fieldset input, fieldset select {
	border: 1px solid #999;
	box-sizing: border-box;
	display: inline-block;
	padding: 4px;
	}
	fieldset input[type="text"], fieldset input[type="date"] {
	margin-right: 10px;
	}
	#nome-cli, #endereco-cli, #cidade-cli {
	width: 80%;
	}
	#sexo-cli {
	width: 175px;
	position: relative;
	left: -20px;
	}
	#celular-cli {
	position: relative;
	left: -20px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<form method="get" name="frm-cli" id="frm-cli">
	<fieldset>
	<legend>Cadastro de clientes</legend>
	<section>
	<label for="cod-cli">Código</label>
	<input type="text" name="cod-cli" id="cod-cli" />
	<input type="checkbox" name="tipo-cli" id="tipo-cli" style="vertical-align: middle;"/>
	<label for="tipo-cli">Empresa</label>
	</section>
	<section>
	<label for="nome-cli">Nome</label>
	<input type="text" name="nome-cli" id="nome-cli" />
	</section>
	<section>
	<label for="data-nasc-cli">Data Nasc.</label>
	<input type="date" name="nome-cli" id="data-nasc-cli" />
	<label for="sexo-cli">Sexo</label>
	<select id="sexo-cli">
	<option value="Selecione um sexo" default>Selecione um sexo</option>
	<option value="M">Masculino</option>
	<option value="F">Feminino</option>
	</select>
	<label style="font-weight: bold;">29 anos</label>
	</section>
	<section>
	<label for="telefone-cli">Telefone</label>
	<input type="text" name="telefone-cli" id="telefone-cli" />
	<label for="celular-cli">Celular</label>
	<input type="text" name="celular-cli" id="celular-cli" />
	</section>
	<section>
	<label for="endereco-cli">Endereço</label>
	<input type="text" name="endereco-cli" id="endereco-cli" />
	</section>
	<section>
	<label for="cidade-cli">Cidade</label>
	<input type="text" name="cidade-cli" id="cidade-cli" />
	</section>
	</fieldset>
	</form>
	</div>
	</body>
	</html>