קלט
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 52 מתוך 76.
אתגר
קלבשיעור הזה נשפר את המראה של שדות הקלט כדי שיהיו נוחים לשימוש.
עצבו את שדות <input>. פעלו לפי השלבים הבאים:
- הגדירו להם רוחב של 100% כדי שיתאימו היטב לטופס.
- הוסיפו ריווח פנימי כדי שהטקסט שבתוכם לא ייגע בקצוות.
- הוסיפו גבול בצבע עדין.
- עגלו את הפינות.
- הוסיפו שוליים בין שדות הקלט כדי שלא ייראו קרובים מדי זה לזה.
- השתמשו ב-box-sizing: border-box; כדי שהרוחב יכלול את הריווח הפנימי ואת הגבולות.
נסו בעצמכם
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין