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

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

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

מוצגים שני רכיבי <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 כששדה טופס נמצא במוקד.

בדיקת ההבנה

בדיקת הידע שלכם לגבי רכיבי טופס

איך מקשרים <label> לרכיב של טופס?

‫for='color' ב-<label> ו-name='color' ב-<input>.
כדאי לנסות שוב.
‫for='color' ב-<label> ו-id='color' ב-<input>.
תשובה נכונה!
‫id='color' ב-<label> ו-for='color' ב-<input>.
כדאי לנסות שוב.
‫name='color' ב-<label> ו-for='color ב-<input>.
כדאי לנסות שוב.

במה משתמשים כדי ליצור פקד טופס עם כמה שורות?

רכיב <input> עם type='multi-line'.
כדאי לנסות שוב.
הרכיב <text>.
כדאי לנסות שוב.
הרכיב <textarea>.
🎉
רכיב <input> עם type='long'.
כדאי לנסות שוב.

איך שולחים טופס?

לחיצה על אלמנט <button>.
נכון, זו אחת מהאפשרויות.
באמצעות המקש Enter.
נכון, זו אחת מהאפשרויות.
לחיצה על רכיב <input> עם type='submit'.
נכון, זו אחת מהאפשרויות.

משאבים