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

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

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

מוצגים שני רכיבי <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>

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

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

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

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

בדיקת ההבנה

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

משאבים

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