כדי להפוך טופס לאינטראקטיבי, צריך להוסיף רכיבי טופס. יש אמצעי בקרה להזנה ולבחירה של נתונים, רכיבים שמתארים אמצעי בקרה, רכיבים שמקבצים שדות ולחצנים לשליחת טופס.
מהם רכיבי טופס?
מוצגים שני רכיבים של <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'
.