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

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

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

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

בדיקת ההבנה

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

איך מחברים <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'.
נכון, זו אחת מהאפשרויות.

משאבים