Organizing fields of formulary

Asked

Viewed 34 times

-1

I am new in programming, I wanted to know how to organize the fields of my following form so that both the label and inputs are aligned, and that equal interest fields, such as (name and surname), (street, number, city and state) are side by side.

@charset "UTF-8";

.form {
  display: flex;
  width: 550px;
  margin-left: 400px;
}

input[type=text], input[type=number], input[type=date],
input[type=email], input[type=password], select {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}



input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  margin-right: 15px;
  margin-top: 10px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=reset] {
  background-color: #FF6347;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  margin-top: 10px;
}

input[type=reset]:hover {
  background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/formstyle-user.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>Cadastrar Usuario</title>
</head>
<body>
	
<form class="form" method="post" action="#">
	<div class="area">
		<fieldset id="usuario">
			<legend>Dados Pessoais</legend>
				<label for="nome">Nome: </label>
					<input type="text" name="	nome" id="nome" placeholder="Nome" required="">

			<label for="sobrenome">Sobrenome: </label>
				<input type="text" name="sobrenome" id="sobrenome" placeholder="Sobrenome" required>

				<label for="cpf">CPF: </label>
					<input type="text" name="cpf" placeholder="000.000.000-00" required>

				<label for="dtnasc">Data Nasc: </label>
					<input type="date" name="dtnasc" id="dtnasc" required>

			<fieldset id="sexo">
					<legend>Sexo: </legend>
					<label for="masc">Masculino<input type="radio" name="sexo" id="masc" checked required></label>
					<label for="fem">Feminino<input type="radio" name="sexo" id="fem" required></label>
			</fieldset>

		</fieldset>

		<fieldset id="endereco">
			<legend>Endereço</legend>

				<label for="rua">Logradouro: </label> <input type="text" name="rua" id="rua" placeholder="João Alvez" required>

				<label for="numero">Número: </label><input type="number" name="numero" id="numero" required>

				<label for="bairro">Bairro: </label><input type="text" name="bairro" id="bairro" >

				<label for="estados">Estado: </label>
					<select id="estados" required>
						<option value=""></option>
					</select>

				<label for="cidades">Cidade: </label>
					<select id="cidades" required>
						<option value=""></option>
					</select>
		</fieldset>

		<fieldset id="login">
			<legend>Dados para Login</legend>

				<label for="email">E-mail: </label><input type="email" name="email" id="email" required>

				<label for="senha">Senha: </label><input type="password" name="senha" id="senha" required>

				<label for="confirma_senha">Confirmar Senha: </label> <input type="password" name="confirma_senha" id="confirma_senha" required>
				

				<label for="nivel">Nível de acesso: </label>
					<select name="nivel" id="nivel" required>
						<option value="">---</option>
						<option value="#">1-Administrador</option>
						<option value="#">2-Técnico</option>
						<option value="#">3-Comum</option>
					</select>

				<label for="cel">Cel: <input type="text" name="cel" id="cel" required></label>
		</fieldset>

		<input type="submit" name="Enviar" value="Enviar">
		<input type="reset" name="Limpar" value="Limpar">
	</form>
</div>
</body>
</html>

html

1 answer

0

One of the ways to do this would be to place each field in a div. Here’s an example:

<div class="campo">
<label for="rua">Logradouro: </label> <input type="text" name="rua" id="rua" placeholder="João Alvez" required>
</div>

Then apply a style to this class to align the fields side by side.

I made an adjustment in your form, the HTML was as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/formstyle-user.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>Cadastrar Usuario</title>
	<style type="text/css">
	@charset "UTF-8";


.campo {
  width: 45%;
  float: right;
  margin: 10px;
}

.campo input {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 90%;
}

.campo select {
  margin: 10px 1%;
  padding: 8px 1%;
  width: 94%;
}

.form {
  display: flex;
  width: 550px;
  margin-left: 400px;
}

input[type=text], input[type=number], input[type=date],
input[type=email], input[type=password], select {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}



input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  margin-right: 15px;
  margin-top: 10px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=reset] {
  background-color: #FF6347;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  margin-top: 10px;
}

input[type=reset]:hover {
  background-color: #FF0000;
}
	</style>
</head>
<body>
	
<form class="form" method="post" action="#">
	<div class="area">
		<fieldset id="usuario">
			<legend>Dados Pessoais</legend>
				<div class="campo">
				<label for="nome">Nome: </label>
					<input type="text" name="	nome" id="nome" placeholder="Nome" required="">
				</div>	

			<div class="campo">
			<label for="sobrenome">Sobrenome: </label>
				<input type="text" name="sobrenome" id="sobrenome" placeholder="Sobrenome" required>
			</div>
			
			<div class="campo">
				<label for="cpf">CPF: </label>
					<input type="text" name="cpf" placeholder="000.000.000-00" required>
			</div>
			
			<div class="campo">
				<label for="dtnasc">Data Nasc: </label>
					<input type="date" name="dtnasc" id="dtnasc" required>
			</div>
			<fieldset id="sexo">
					<legend>Sexo: </legend>
					<label for="masc">Masculino<input type="radio" name="sexo" id="masc" checked required></label>
					<label for="fem">Feminino<input type="radio" name="sexo" id="fem" required></label>
			</fieldset>

		</fieldset>

		<fieldset id="endereco">
			<legend>Endereço</legend>
				<div class="campo">
				<label for="rua">Logradouro: </label> <input type="text" name="rua" id="rua" placeholder="João Alvez" required>
				</div>

				<div class="campo">
				<label for="numero">Número: </label><input type="number" name="numero" id="numero" required>
				</div>

				<div class="campo">
				<label for="bairro">Bairro: </label><input type="text" name="bairro" id="bairro" >
				</div>
				<div class="campo">
				<label for="estados">Estado: </label>
					<select id="estados" required>
						<option value=""></option>
					</select>
				</div>	

				<div class="campo">
				<label for="cidades">Cidade: </label>
					<select id="cidades" required>
						<option value=""></option>
					</select>
				</div>	
		</fieldset>

		<fieldset id="login">
			<legend>Dados para Login</legend>
				<div class="campo">
				<label for="email">E-mail: </label><input type="email" name="email" id="email" required>
				</div>
				
				<div class="campo">
				<label for="senha">Senha: </label><input type="password" name="senha" id="senha" required>
				</div>

				<div class="campo">
				<label for="confirma_senha">Confirmar Senha: </label> <input type="password" name="confirma_senha" id="confirma_senha" required>
				</div>	

				<div class="campo">
				<label for="nivel">Nível de acesso: </label>
					<select name="nivel" id="nivel" required>
						<option value="">---</option>
						<option value="#">1-Administrador</option>
						<option value="#">2-Técnico</option>
						<option value="#">3-Comum</option>
					</select>

				</div>

				<div class="campo">	
				<label for="cel">Cel: <input type="text" name="cel" id="cel" required></label>
				</div>
		</fieldset>

		<input type="submit" name="Enviar" value="Enviar">
		<input type="reset" name="Limpar" value="Limpar">
	</form>
</div>
</body>
</html>

  • perfect, thank you very much friend

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.