בפרקים הקודמים של המדריך כיסינו כמעט את כל הנושאים החשובים ב-HTML. בחלק זה נעבור על 2 אלמנטים חשובים נוספים – כתפורים וטפסים
טפסים
טפסים ב-HTML משמשים אותנו למצבים שבהם אנו רוצים לאסוף מידע מהמשתמש.
- התגית form היא התגית הפותחת שבה נשתמש ליצירת טפסים.
- התגית input משמשת ליצור שדה שבו ניתן להקליד טקסט
- במאפיין type נשתמש על מנת להגדיר את סוג השדה של ה-input.
מאפיין זה יודע לקבל את הערכים text, number וכו'. - התגיות select ו-option מייצרות מעין קופסא שבוררת בין מספר אופציות.
- התגית textarea משמשת ליצירת קופסא גדולה של שדה טקסט לפי מספר השורות שנגדיר במאפיין –rows.
- את הטופס נסגור באמצעות תגית סוגרת form כמובן:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with form</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
<br/>
table example:
<br/>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Yurgen"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Vice"><br><br>
<input type="submit" value="Submit">
</form>
</p>
</body>
</html>
שימו לב כי לפי דוגמא זו, לחיצה על הכפתור –submit תפנה בקשה למסמך php שאמור לטפל בפרטים שאספנו מהמשתמש.
פקדים נוספים שניתן להשתמש בהם בטופס
קיימים פקדים נוספים שניתן להשתמש בטפסים כמו Radio Button למשל.
פקד זה יוצר לנו אפשרויות בחירה אשר ניתנות לסימון:
<form>
<input type="radio" id="html" name="colors" value="Red">
<label for="html">Red</label><br>
<input type="radio" id="css" name="colors" value="Yellow">
<label for="css">Yellow</label><br>
<input type="radio" id="javascript" name="colors" value="Green">
<label for="javascript">Green</label>
</form>
שימו לב כי כל Radio Button ניתן לסמן פעם אחת בזמן נתון,
כלומר שלא ייתכן מצב שבו יהיו מסומנות 2 תיבות כאלו באותו הזמן.
פקד שימושי נוסף שיש להכיר הוא קופסאות סימון – Check Boxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Hoverboard">
<label for="vehicle3"> I have a hoverboard</label>
</form>
שימו לב כי ניתן לבחור מ-0 קופסאות סימון עד לכולן בזמן נתון:
כפתורים ב-HTML
- התגית button משמשת ליצירת כפתור.
- ההבדל בין כפתור לקישור הוא שכפתור הוא גרפי וקישור הוא טקסטואלי (לרוב).
- המאפיין onclick משמש לחיווי בעת הקשת המשתמש על הכפתור
- המאפיין ondblclick משמש לחיווי בעת לחיצה כפולה (דאבל-קליק) של המשתמש על הכפתור:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with button</h1>
</head>
<body>
<button ondblclick="myalert()">
Show Alert Message
</button>
<script>
function myalert() {
alert("You've clicked the button");
}
</script>
</body>
</html>
בדוגמא זו יצרנו כפתור שמציג לנו הודעה באמצעות סקריפט, כאשר לוחצים עליו לחיצה כפולה.
כמובן שנוכל לתת פונקציונליות אחרת לכפתור, למשל להשתמש בו כקישור.
במקרה כזה למאפיין onclick היינו נותנים את כתובת היעד בתור ערך.
ניתן לומר כי בכך סיימנו ללמוד את כלי הבסיס של HTML.
בחלק הבא נלמד על HTML5 והשינויים שהגיעו אתו.
לקריאה מורחבת באתר של איגוד האינטרנט הישראלי יש ללחוץ כאן.
