Stylizowanie inputa

Question

Cześć,

Próbuję stworzyć prosty formularz kontaktowy. Zależ mi na tym aby inputy układały się równo ale pomimo zastosowania tej samej klasy dla inputa typu "text" oraz inputa typu "submit" , długość tych inputów jest inna. Może wie ktoś z czego to wynika? Ponadto może znacie bardziej efektywny sposób wykorzystania css niż ja zapisałem?

HTML

<div id="contact">
		
	<form action="#" method="POST">
	<h3>Formularz Kontaktowy</h3>
	<div class="line"></div>

	<div class="row">
		<div id = "form1">
			<input class="norm" type="text" placeholder="Imię" />
			<input class="norm" type="text" placeholder="E-mail" />
			<input class="norm" type="text" placeholder="Numer telefonu" />
		</div>
			
		<div id="form2">
			<input class="message" type="text" placeholder="Twoja wiadomość" />
			<input class="norm" type="submit" />
		</div>
	</div>
	</form>
</div>

CSS

#form1
{
	display:flex;
	flex-direction:column;
	margin-right: 50px;
}


#form2
{
	display:flex;
	flex-direction:column;
}
.row
{
	display:flex;
	flex-direction:row;
}

.norm
{

	width: 250px;
	height:40px;
	background-color: #cacaca;
	border:none;
	margin-bottom:20px;
}

.message
{
	width: 250px;
	height:104px;
	background-color: #cacaca;
	border:none;
	margin-bottom:20px;
}

Answer 1

Minimalnie różne szerokości, z tego co widzę, wynikają z braku box-sizing: border-box (dobrze jest go ustawić globalnie, np. selektorem uniwersalnym).

Ponadto może znacie bardziej efektywny sposób wykorzystania css niż ja zapisałem?

Staraj się unikać stylowania po identyfikatorze. Deklaracje styli powielające te same reguły można łączyć w listy.

Poza tym, korzystaj z odpowiednich typów inputów (przy okazji: brakuje dla nich etykiet), bo u Ciebie wszystkie są typu tekstowego, mimo że masz tam email i numer telefonu. Kontrolki formularza można otoczyć w <fieldset> razem z <legend>.

Comments

Bardzo dziękuję za pomoc.

Answer 2

A jak chcesz "obsłużyć" formularz skoro pola (input-y) nie posiadają atrybutu name.

W linii 15 chyba chodziło Tobie o <textarea>

<textarea class="message" name="message" placeholder="Twoja wiadomość"></textarea>

a w css do .message dopisz wtedy

resize: none;

druga sprawa pole message lekko "wystaje"

i samo ustawienie

box-sizing: border-box;

 nie wystarczy. 

Skoro masz dla .norm

height: 40px;
margin-bottom: 20px;

to dla messag  masz 40 + 40 + 20 czyli wpisz

height: 100px;

możesz też użyć calc() i zmienne css, wtedy zapis zrobić np. taki

:root {
  --norm-height: 40px;
  --norm-margin-bottom: 20px;
}
 
.norm,
.message
{ 
    width: 250px;
    height: var(--norm-height);
    background-color: #cacaca;
    border: none;
    margin-bottom: var(--norm-margin-bottom);
}
 
.message
{
    height: calc((var(--norm-height) * 2) + var(--norm-margin-bottom));
    resize: none; /* gdy zastosujesz <textarea> */
}

 

P.S. też możesz ostylować:

• placeholder
• gdy np. input jest "wskazany" (otrzymuje fokus)
• form

Comments

Bardzo dziękuję za pomoc.