Menu
Coddy logo textTech

קלט

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 52 מתוך 76.

challenge icon

אתגר

קל

בשיעור הזה נשפר את המראה של שדות הקלט כדי שיהיו נוחים לשימוש.

עצבו את שדות <input>. פעלו לפי השלבים הבאים:

  1. הגדירו להם רוחב של 100% כדי שיתאימו היטב לטופס.
  2. הוסיפו ריווח פנימי כדי שהטקסט שבתוכם לא ייגע בקצוות.
  3. הוסיפו גבול בצבע עדין.
  4. עגלו את הפינות.
  5. הוסיפו שוליים בין שדות הקלט כדי שלא ייראו קרובים מדי זה לזה.
  6. השתמשו ב-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 אונליין