תוויות לשדות קלט
חלק מהיחידה יסודות במסלול ה-HTML של Coddy. שיעור 39 מתוך 60.
לא תמיד ברור למה מיועדת שדה קלט ללא תווית. תווית מספקת למשתמשים רמז חזותי ברור לגבי סוג הקלט המצופה בשדה הזה. יוצרים תוויות באמצעות התג <label>.
הנה התחביר הבסיסי:
<label for="field">Label text</label>
<input type="text" id="field"><label>: התג שיוצר את התווית.
for: קישור בין התווית לשדה בטופס. הערך שלforצריך להיות זהה ל-idשל השדה בטופס.
- טקסט תווית: הטקסט שמתאר למה מיועד שדה הטופס.
<input>: שדה הטופס שאליו התווית מתייחסת.
id: המזהה הייחודי של שדה הטופס, שתואם למאפייןforשבתווית.
לאחר שמקשרים ביניהם, לחיצה על טקסט התווית מציבה את הסמן בשדה הקלט שלה (ממקדת אותו), וכך גם מספקת למשתמשים אזור גדול יותר ללחיצה.
אתגר
קלהוסף את התגיות הבאות בתוך התג <form>:
- תג
<label>עם הטקסט 'First Name:' והמאפייןforמוגדר ל-'firstname'. - שדה
<input>עםtype="text". - לשדה
<input>צריך להיותidשתואם למאפייןforשל התווית.
נסו בעצמכם
<!DOCTYPE html>
<html>
<body>
<form>
<!-- כתבו כאן קוד -->
</form>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
תרגלו בעצמכם: Web אונליין