-3
I am making a form and put 4 fieldsets in it, 1° for Pessoa, 2° for Address, 3° for Medical Data and 4° for Extra Comments. It turns out that when I open it in Google Chrome, the 3° fieldset is within the 2° fieldset, in such a way that it doesn’t even appear the label of the 3° fieldset, I needed to separate them but am not getting.
- I already changed the order of the fieldset, put the 3° in place of the 2° and they WORKED, but hid the 4°.
- I noticed that the 2° fieldset(Address) is always "eating" the fieldsets below it.
Follow my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Formulario.css" media="screen">
<script type="text/javascript" src="Formulario.js"></script>
<title>Cadastro</title>
</head>
<body>
<div>
<h1 id="titulo">Cadastro Vacinação</h1>
<p id="subtitulo">Complete atenciosamente suas informações</p>
<br>
</div>
<form>
<fieldset class="grupo1">
<div>
<label for="nome"><Strong>Nome:*</Strong></label>
<input type="text" name="nome" id="nome" required>
</div>
<div class="campo">
<label for="sobrenome"><Strong>Sobrenome:*</Strong></label>
<input type="text" name="sobrenome" id="sobrenome" required>
</div>
<div class="campo">
<label for="idade"><Strong>Data de Nascimento:*</Strong></label>
<input type="text" name="idade" id="idade" maxlenght="10" onkeypress="mascaraData(this)" required>
</div>
<div class="campo">
<label for="cel"><Strong>Tel(Celular):*</Strong></label>
<input type="text" name="cel" id="cel" onkeypress="mascara(this, mascaraCel);" onblur="mascara(this, mascaraCel);" required>
</div>
<div class="campo">
<label for="email"><Strong>E-Mail:*</Strong></label>
<input type="email" name="email" id="email" required>
</div>
<div class="campo">
<label for="cpf"><Strong>CPF:*</Strong></label>
<input type="text" id="cpf" onkeyup="cpfCheck(this)" maxlength="14" onkeydown="javascript:fMasc(this, mCPF);" required>
</div>
</fieldset>
<fieldset class="grupo2">
<div class="campo">
<label for="cep"><Strong>CEP:*</Strong></label>
<input id="cep" name="cep" type="text" placeholder="01010-100" value="" maxlenght="9" onblur="pesquisacep(this.value);" required />
<label for="rua"><Strong>Logradouro:*</Strong></label>
<input id="rua" name="rua" type="text" placeholder="Rua das Nações" required />
<label for="numero"><Strong>Número:</Strong></label>
<input id="numero" type="text" />
<label for="complemento"><Strong>Complemento:</Strong></label>
<input id="complemento" type="text" />
<label for="bairro"><Strong>Bairro:*</Strong></label>
<input id="bairro" name="bairro" type="text" placeholder="Jardim das Nações" required />
<label for="cidade"><Strong>Cidade:*</Strong></label>
<input id="cidade" name="cidade" type="text" placeholder="São Paulo">
<label for="uf"><Strong>Estado:*</Strong></label>
<select id="uf" name="uf">
<option selected disabled value="">Selecione:</option>
<option value="AC">Acre (AC)</option>
<option value="AL">Alagoas (AL)</option>
<option value="AP">Amapá (AP)</option>
<option value="AM">Amazonas (AM)</option>
<option value="BA">Bahia (BA)</option>
<option value="CE">Ceará (CE)</option>
<option value="DF">Distrito Federal (DF)</option>
<option value="ES">Espírito Santo (ES)</option>
<option value="GO">Goiás (GO)</option>
<option value="MA">Maranhão (MA)</option>
<option value="MT">Mato Grosso (MT)</option>
<option value="MS">Mato Grosso do Sul (MS)</option>
<option value="MG">Minas Gerais (MG)</option>
<option value="PA">Pará (PA)</option>
<option value="PB">Paraíba (PB)</option>
<option value="PR">Paraná (PR)</option>
<option value="PE">Pernambuco (PE)</option>
<option value="PI">Piauí (PI)</option>
<option value="RJ">Rio de Janeiro (RJ)</option>
<option value="RN">Rio Grande do Norte (RN)</option>
<option value="RS">Rio Grande do Sul (RS)</option>
<option value="RO">Rondônia (RO)</option>
<option value="RR">Roraima (RR)</option>
<option value="SC">Santa Catarina (SC)</option>
<option value="SP">São Paulo (SP)</option>
<option value="SE">Sergipe (SE)</option>
<option value="TO">Tocantins (TO)</option>
</selection>
</div>
</fieldset>
<fieldset class="grupo3">
<div class="campo">
<label><Strong>Qual seu tipo sanguíneo?</Strong></label>
<label>
<input type="radio" name="sg" value="NS" checked>Não Sei
</label>
<label>
<input type="radio" name="sg" value="A+">A+
</label>
<label>
<input type="radio" name="sg" value="A-">A-
</label>
<label>
<input type="radio" name="sg" value="B+">B+
</label>
<label>
<input type="radio" name="sg" value="B-">B-
</label>
<label>
<input type="radio" name="sg" value="AB+">AB+
</label>
<label>
<input type="radio" name="sg" value="AB-">AB-
</label>
<label>
<input type="radio" name="sg" value="O+">O+
</label>
<label>
<input type="radio" name="sg" value="O-">O-
</label>
</div>
<div class="campo">
<label for="sus"><Strong>Carteira SUS:</Strong></label>
<input type="number" name="sus" id="sus">
</div>
<div class="campo">
<label><Strong>Se vacinou nos últimos 7 meses?</Strong></label>
<label>
<input type="radio" name="sete" value="sim" checked>Sim
</label>
<label>
<input type="radio" name="sete" id="nao">Não
</label>
</div>
</fieldset>
<fieldset class="grupo4">
<div class="campo">
<br>
<label><Strong>Está sentindo algum sintoma estranho? Se sim, nos conte.</Strong></label>
<textarea row="6" style="width: 26em" name="sintoma" id="sintoma"></textarea>
</div>
</fieldset>
<button class="conclu" type="submit">Concluído</button>
<input class="print" type="button" value="Imprimir" onClick="window.print()" />
</form>
</body>
</html>
Typo: have a look at
<fieldset class="grupo2">in<select id="uf" name="uf">you close with the tag</selection>– Augusto Vasques
Thanks Augusto, went unnoticed. Grateful!
– Eduardo de Lucca