HTML/טפסים/מקצועיים

תוויות

לרוב, לכל שדה קלט תיתנו תווית כמו שם, מספר טלפון וכו'. את התווית ניתן לקשר בעזרת תג מיוחד לשדה הקלט אליו היא קשורה. על ידי כך ניתן להקל על הנגישות לטופס. לחיצה על התווית תגרום למיקוד להופיע בשדה הקלט. לחיצה על תווית של כפתור רדיו למשל, תגרום לכפתור להיבחר. למרות שניתן לכתוב תוויות כטקסט פשוט, אם אתם משתמשים בתוויות, השתמשו בתג התווית - label.

התג label
לתג label מאפיין for שקובע עבור התווית לאיזה שדה קלט היא קשורה. ערכו צריך להיות ערך מאפיין id של שדה טופס!

בדוגמה הבאה שדה לשם מלא, ושלוש שדות לכפתורי רדיו. לחיצה על התווית 'שם מלא:' תעביר את המיקוד (הסמן) לתוך השדה ותאפשר כתיבה בו. (כמו לחיצה על השדה עצמו). לחיצה על התוויות עם שמות הערים היא כמו לחיצה על כפתורי הרדיו, ותבחר את הכפתור המתאים.

<p> טופס לסקר העיר הטובה ביותר: </p>
<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
     <label for="name">שם מלא:</label>
     <input type="text" name="name" id="name" />
     <br />

     <input type="radio" name="city" id="city_jerusalem" />
     <label for="city_jerusalem">ירושלים</label>
     <br />

     <input type="radio" name="city" id="city_tlv" />
     <label for="city_tlv">תל-אביב</label>
     <br />

     <input type="radio" name="city" id="city_haifa" />
     <label for="city_haifa">חיפה</label>
  </fieldset>
</form>

האלמנט legend

אלמנט זה, אם הוא מופיע, חייב להיות צאצא ישיר של fieldset והוא מגדיר כיתוב/תמצית של ה-fieldset. דפדפנים גרפיים יציגו אותו בצורה יפה, על קו המסגרת של fieldset, והוא חשוב במיוחד לדפדפנים קוליים, שכן הוא מתאר את קבוצת השדות. חשוב להשתמש באלמנט זה! אין לשים יותר מאחד בתוך fieldset. אין לשים אלמנט legend כצאצא של כל אלמנט אחר מלבד fieldset!

דוגמה:

<p> טופס לסקר העיר הטובה ביותר: </p>
<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
     <legend>פרטים אישיים</legend>

     <label for="private_name">שם פרטי:</label>
     <input type="text" name="private_name" id="private_name" />
     <br />

     <label for="family_name">שם משפחה:</label>
     <input type="text" name="family_name" id="family_name" />
  </fieldset>

  <fieldset>
     <legend>הסקר</legend>

     <input type="radio" name="city" id="city_jerusalem" />
     <label for="city_jerusalem">ירושלים</label>
     <br />

     <input type="radio" name="city" id="city_tlv" />
     <label for="city_tlv">תל-אביב</label>
     <br />

     <input type="radio" name="city" id="city_haifa" />
     <label for="city_haifa">חיפה</label>
  </fieldset>
</form>

ניווט באמצעות מקש TAB

לרוב האנשים שרגילים לעבוד עם מחשבים, ולאו דווקא לבעלי צרכים מיוחדים, נוח יותר להשתמש במקש ה-TAB על מנת לעבור משדה טופס אחד למשנהו. מקש ה-TAB מיועד למעבר משדה לשדה (או מאלמנט לאלמנט) בעזרת המקלדת. לשדות הקלט (input, button, select, textarea), ולעוד מספר אלמנטים אחרים (a, area, object), יש מאפיין שנקרא tabindex. ערכו יכול להיות כל מספר בין 0 ל- 32767. מספר זה קובע את סדר מעבר הטאבים (הסדר שבו מגיע מיקוד מאלמנט לאלמנט בעת לחיצת TAB). מספר נמוך יותר משמעו שהאלמנט מופיע קודם בסדר מעבר הטאבים. אלמנט עם המספר 0 במאפיין tabindex יהיה דווקא האחרון אליו מגיע המיקוד ולא הראשון. ניתן לתת לכמה אלמנטים את אותו ערך ב-tabindex. כולם יקבלו את המיקוד בזה אחר זה לפי המיקום שלהם בקובץ ה-HTML - זה שמופיע קודם יקבל מיקוד קודם.

דוגמה:

<p> טופס לסקר העיר הטובה ביותר: </p>
<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
     <legend>פרטים אישיים</legend>
 
    <label for="name">שם פרטי:</label>
     <input type="text" name="private_name" id="private_name" tabindex="1" />
     <br />

     <label for="name">שם משפחה:</label>
     <input type="text" name="family_name" id="family_name" tabindex="2" />

  </fieldset>
  <fieldset>
     <legend>הסקר</legend>

     <input type="radio" name="city" id="city_jerusalem" tabindex="3" />
     <label for="city_jerusalem">ירושלים</label>
     <br />

     <input type="radio" name="city" id="city_tlv" tabindex="3" />
     <label for="city_tlv">תל-אביב</label>
     <br />

     <input type="radio" name="city" id="city_haifa" tabindex="3" />
     <label for="city_haifa">חיפה</label>
  </fieldset>
</form>

המאפיין accesskey

דרך נוספת מלבד מקש ה-TAB לניווט עם המקלדת, היא שימוש ב-accesskey. accesskey הוא תו שלחיצה עליו תעביר את המיקוד לאלמנט אליו הוא משוייך. משתמשי חלונות ילחצו על ה-accesskey יחד עם המקש alt, ובמחשבי אפל יחד עם המקש cmd כדי להפעיל את האלמנט.

מאפיין זה קיים בחלק מאלמנטי הטופס (input, button, textarea, label, legend), ובעוד מספר אלמנטים אחרים (a, area). ערכו חייב להיות תו בודד מהמקלדת.

כל דפדפן מתנהג שונה עם המאפיין הזה, ולכן יש להשתמש בו בזהירות (לבדוק עם כמה דפדפנים שונים ועם משתמשי מחשבים מסוגים שונים). אף על פי כן חשוב להשתמש בו כי הוא מקל מאוד על אנשים עם מוגבלויות מוטוריות!

דוגמה:

<p> טופס לסקר העיר הטובה ביותר: </p>
<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
     <legend accesskey="p">פרטים אישיים</legend>

     <label for="name" accesskey="n">שם פרטי:</label>
     <input type="text" name="private_name" id="private_name" tabindex="1" />
     <br />

     <label for="name" accesskey="f">שם משפחה:</label>
     <input type="text" name="family_name" id="family_name" tabindex="2" />
  </fieldset>

  <fieldset>
     <legend accesskey="s">הסקר</legend>

     <input type="radio" name="city" id="city_jerusalem" tabindex="3" accesskey="j" />
     <label for="city_jerusalem">ירושלים</label>
     <br />

     <input type="radio" name="city" id="city_tlv" tabindex="3" accesskey="t" />
     <label for="city_tlv">תל-אביב</label>
     <br />

     <input type="radio" name="city" id="city_haifa" tabindex="3" accesskey="h" />
     <label for="city_haifa">חיפה</label>
  </fieldset>
</form>

ניווט

הפרק הקודם: טפסים למתחילים

טפסים פשוטים ומקצועיים תרגילים

הפרק הבא: שדות קלט מתקדמים

אלמנטים שנלמדו בפרק זה:

• label
• legend

אלמנטים רלוונטיים:

• form
• fieldset
• input

אלמנטים רלוונטיים שעדיין לא נלמדו:

• textarea
• select
• option
• optgroup
• button