איך לעזור למשתמשים להזין נתונים בטפסים

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

מהם רכיבי טופס?

מוצגים שני רכיבים של <input>, <input type="text"> ו-<input type="file">. למה הם נראים אחרת?

בהתאם לשם הרכיב ולמאפיין type, הדפדפנים מציגים ממשקי משתמש שונים, משתמשים בכללי אימות שונים ומספקים תכונות רבות נוספות. אם תשתמשו בפקדי הטפסים המתאימים, תוכלו ליצור טפסים בצורה טובה יותר.

תוויות לרכיבי טופס

נניח שאתם רוצים להוסיף קלט שבו המשתמש יוכל להזין את הצבע המועדף עליו. כדי לעשות את זה, צריך להוסיף לטופס אלמנט <input>. אבל, איך המשתמש יודע שהוא צריך למלא את הצבע המועדף עליו?

כדי לתאר את פקדי הטפסים, צריך להשתמש ב-<label> לכל פקד טופס.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

המאפיין for באלמנט התווית תואם למאפיין id בקלט.

מתבצע תיעוד של קלט המשתמש

כפי שהשם מרמז, האלמנט <input> משמש לאיסוף קלט ממשתמשים.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

כפי שצוין קודם, המאפיין id מקשר בין <input> לבין <label>. מה לגבי מאפיין השם והסוג בדוגמה הזו?

מאפיין השם

המאפיין name מאפשר לזהות את הנתונים שהמשתמש מזין עם הפקד. כששולחים את הטופס, השם הזה ייכלל בבקשה. נניח שנתתם לפקד הטופס mountain והמשתמש הזין את Gutenberg, הבקשה כוללת את המידע הזה בתור mountain=Gutenberg.

נסו לשנות את השם של פקד הטופס ל-hill. אם עושים זאת בצורה נכונה ושולחים את הטופס, אפשר לראות את hill בכתובת ה-URL.

סוג הקלט

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

על ידי שימוש ב-type="checkbox", הדפדפן מעבד כעת תיבת סימון במקום שדה טקסט. תיבת הסימון כוללת גם מאפיינים נוספים. אפשר להגדיר את המאפיין checked כך שהוא יהיה מסומן.

יש מגוון סוגים אחרים שאפשר לבחור. במודול מאוחר יותר יש מידע מפורט.

אפשר להזין שורות טקסט מרובות

נניח שנדרש שדה שבו המשתמש יכול לכתוב תגובה. בשביל זה, לא יהיה זה נהדר אם הם יוכלו להזין שורות טקסט מרובות? זו המטרה של האלמנט <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

בחירה מתוך רשימה של אפשרויות

איך אתם מספקים למשתמשים רשימה של אפשרויות לבחירה? כדי להשיג זאת, אפשר להשתמש ברכיב <select>.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

קודם עליך להוסיף רכיב <select>. כמו בכל פקדי טפסים אחרים, מחברים אותו אל <label> עם המאפיין id ונותנים לו שם ייחודי באמצעות המאפיין name.

בין תג ההתחלה לבין תג הסיום של הרכיב <select> אפשר להוסיף מספר רכיבי <option>, שכל אחד מהם מייצג בחירה אחת.

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

אם שולחים את הטופס באמצעות <select> בלי לשנות את הבחירה, הבקשה תכלול את הערך color=orange. אך כיצד הדפדפן יודע באיזו אפשרות יש להשתמש?

הדפדפן ישתמש באפשרות הראשונה ברשימה, אלא אם:

• לרכיב <option> אחד יש את המאפיין selected.
• המשתמש בוחר אפשרות אחרת.

יש לבחור אפשרות מראש

המאפיין selected מאפשר לבחור מראש אפשרות אחת. הגדרה זו הופכת לברירת המחדל, ללא קשר לסדר שבו רכיבי <option> מוגדרים.

קיבוץ בקרות טפסים

לפעמים תצטרכו לקבץ את פקדי הטופס. אפשר להשתמש ברכיב <fieldset> כדי לעשות זאת.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

האם הבחנת באלמנט <legend> בתוך האלמנט <fieldset>? למה לדעתכם היא משמשת?

אם התשובה שלך היא "לתאר את הקבוצה של פקדי טפסים", אתה צודק!

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

שליחת טופס

אחרי שלמדתם איך להוסיף פקדי טפסים ולקבץ אותם, מעניין אתכם לדעת איך משתמשים יכולים לשלוח טופס.

האפשרות הראשונה היא להשתמש ברכיב <button>.

<button>Submit</button>

אחרי שמשתמש לוחץ על הלחצן Submit, הדפדפן שולח בקשה לכתובת ה-URL שצוינה במאפיין הפעולה של הרכיב <form>, יחד עם כל הנתונים מאמצעי הבקרה של הטופס.

אפשר גם להשתמש ברכיב <input> עם רכיב type="submit" במקום עם רכיב <button>. הקלט נראה ומתנהג בדיוק כמו <button>. במקום להשתמש ברכיב <label> כדי לתאר את <input>, השתמשו במאפיין value.

<input type="submit" value="Submit">

בנוסף, ניתן לשלוח טופס גם באמצעות המפתח Enter כשמתמקדים בשדה בטופס.

בחינת ההבנה

בחינת הידע שלך על רכיבי טפסים

משאבים

• אלמנט התווית
• רכיב הקלט
• הרכיב textarea
• הרכיב הנבחר
• הרכיב fieldset
• אלמנט הלחצן