• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyrównanie tekstu w formularzu

Object Storage Arubacloud
+2 głosów
1,846 wizyt
pytanie zadane 23 stycznia 2017 w HTML i CSS przez Patryk Sadkowski Nowicjusz (220 p.)

Witam otóż w jaki inny sposób można wyrównać równo pod sobą tekst z "input blokami" tak żeby to wyglądało estetycznie prócz tabel. 

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>ADD USER</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
<div id="add_user">

<form>
	<h2>DODAWANIE UŻYTKOWNIKA</h2>

	Nazwa Użytkownika: <input type="text" name="uid">
	Hasło: <input type="password" name="pwd">
	<div class="clear"></div>

	Imię: <input type="text" name="first">
	Nazwisko: <input type="password" name="last">
	<div class="clear"></div>

	E-mail: <input type="text" name="mail">
	PESEL: <input type="date" name="PESEL">
	<div class="clear"></div>

	<button>DODAJ UŻYTKOWNIKA</button> <button>ZRESETUJ</button>
</form>

</div>
</div>


</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: Arial;
	color: white;
}

.clear {
	clear: both;
}

#container {
	width: 960px;
}

#add_user {
	outline-width: 
	padding: 10px;
	border: 1px black solid;
	background-color: #222222;
}

#add_user > h2 {
	text-align: center;
}

#add_user > form >  button {
	color: black;
}

#add_user > form > input {
	width: 200px;
}

 

2 odpowiedzi

+1 głos
odpowiedź 23 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

inputy powinny mieć etykiety - znacznik label https://developer.mozilla.org/pl/docs/Web/HTML/Element/label

Możesz np. wziąć każdy input wraz z etykieta w diva.

+1 głos
odpowiedź 23 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)

Poczytaj o grid system w css, ładny układ i responsywność za jednym zamachem. Polecam ten z W3CSS, bardzo prosty i intuicyjny.

I tak jak napisał kolega xmentor zawsze dawaj label.

komentarz 23 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

Polecam ten z W3CSS, bardzo prosty i intuicyjny.

A ja nie polecam :D

komentarz 23 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)
Może rozwiń, bo to co napisałeś nic nie wnosi.
komentarz 23 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)
Można wyszukać coś lepszego niż 'framework' od W3Schools.

http://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy
komentarz 24 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)
No i następnym razem od razu tak rozwijaj.

Wiem o tym, że to nie ma nic wspólnego z W3C, ale spełnia swoje zadania, jest bardzo intuicyjny, lekki i prosty w nauce, dla małych projektów idealny. Więc czemu z niego nie korzystać?

Podobne pytania

0 głosów
2 odpowiedzi 1,165 wizyt
pytanie zadane 3 sierpnia 2016 w HTML i CSS przez alus152 Bywalec (2,690 p.)
0 głosów
4 odpowiedzi 12,125 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez redstar1 Bywalec (2,200 p.)
0 głosów
2 odpowiedzi 1,667 wizyt

92,575 zapytań

141,424 odpowiedzi

319,649 komentarzy

61,960 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...