מעבר מבניית אתרים בצורה של טבלאות לבניה נכונה

yair24

Member
מעבר מבניית אתרים בצורה של טבלאות לבניה נכונה

יש לי טופס של LOGIN שיש בו שם משתמש וססמא.
אני תמיד רגיל לעשות את הטופס הזה בתוך טבלה.

אם אני רוצה לעבור לצורה אחרת מה הדרך הכי נכונה לעשות טופס כזה?

כמו שאמרתי
שם משתמש ושדה לרישום של השם משתמש
מתחת שדה של ססמא
ומתחת כפתור שלח.

כדאי להשתמש בDIV עבור כל שדה?

תודה
 
למה div?

סתם כתרגיל - העלה בבקשה ציור (PNG) של המסך הרצוי, ותראה מה אנשים שונים עושים.
 

yair24

Member
הנה

זה למשל טופס שתמיד הייתי עושה עם טבלה TR מעל TR
וזהו.
&nbsp
אבל כמו שכבר הבנתי לא ככה אמורים לעשות טופס כזה.
&nbsp
&nbsp

 
אין לי סבלנות לסדר זהה לסידור שלך .. אבל קבל משהו קצרצר

קוד:
<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>login</title>
		<!--style should on css file -->
		<style type='text/css'>
			div.divCenter { position:absolute; top:50%; left:50%; overflow:visible; }
			form.formLogin { position:absolute;  width:300px;  height:250px; top:-125px;  left:-150px; 
				border: 3px solid #7b9597;border-radius: 8px;box-shadow: 0 0 15px 0 #222; text-align:center;}
			label { width:100px; display:inline-block; padding:4px;}
			h2 { text-align:center; }
			form.formLogin > button { background-color:#b0ffb0 }
		</style>
	</head>
	<body>
		<div class='divCenter'>
			<form method='post' action='#' class='formLogin'>
				<h2> Please login </h2>
				<label for='inpUser'>User name: </label><br><input id='inpUser' name='inpUser'>
				<br><br>
				<label for='inpPass'>password: </label><br><input id='inpPass' name='inpPass' type='password'>
				<br>
				<br>
				<!-- may be submit instead of button -->
				<button > login </button>
				
			</form>
		</div>
	</body>
</html>
 
הערה על טבלאות

טבלות הן טובות, אפילו מעולות כאשר הפלט שלך צריך להיות טבלה. אם את קטע התצוגה היית ממקם בגליון אלקטרוני (נניח אקסל) - אז זה המקום הנכון להשתמש בטבלה. המסך שציירת לא נראה כמו טבלא - הוא נראה כמו רצף של שורות, ולכן במקרה זה טבלה לא היתה במקום.
&nbsp
כלל אצבע - אם תציג אם קוי הטבלה, והתוצאה תהיה "נכונה" - אז כנראה שזה תקין להשתמש בטבלא. נסה להוסיף לקוד שלך תצוגת גבול לתאי הטבלא - זה נראה תקין? אם לא - אז טבלא היא לא האלמנט הנכון.
 
למעלה