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

TextBox – שדה טקסט שניתן לכתוב בו

להוספת פקד TextBox נגרור אותו לדף שלנו מתוך ה-Toolbox:

לאחר גרירת הפקד לדף ייכתב הקטע הבא בתוך הדף:

<asp:TextBox ID="txtHello" runat="server" Text="Hello ASP.Net" />

ההגדרה “runat=”server הכרחית לכל פקד שעובדים איתו בצד השרת (Code Behind).

ה – ID משמש כמזהה של הפקד. ניתן ב – Code Behind לגשת לפקד כאשר ה – ID הוא שם הפקד. לדוגמא, אם נרצה להגדיר מה שייכתב בתוכו ב – Code Behind נעשה זאת כך:

txtHello.Text = "Hello ASP.Net";

אם נעבור ל – Designer נראה את ה – TextBox כך:

שימו לב שמה שכתבנו במאפיין Text הוא מה שנכתב בתוך תיבת הטקסט בהתחלה. המשתמש, כמובן, יכול לשנות זאת.

על-מנת לראות כיצד הדף נראה בדפדפן, נלחץ על הכפתור הימני של העכבר על הדף שמופיע ב-Solution Explorer ונבחר ב – View in browser.

אם נתבונן בקטע ה – HTML של תיבת הטקסט, נראה שזו התוצאה:

<input name="txtHello" type="text" 
  value="Hello ASP.Net" id="Text1" />

CheckBox – תיבת סימון

הפקד הזה משמש לסימון, נשתמש בו בעיקר כאשר נרצה שהמשתמש יסמן נתון מסויים ב כן / לא, לדוגמה:

בדומה ל – TextBox – גם אותו ניתן לגרור מתוך ה – Toolbox והוא נכתב באופן הבא:

<asp:CheckBox ID="Checkbox1" 
  Text="אני מעוניין לקבל פרסומות" runat="server" />

שימו לב שניתן להגדיר את הכיתוב שיהיה ליד ה – Checkbox במאפיין Text.

בסופו של דבר – ה – HTML שיתקבל הוא :

<input id="Checkbox2" type="checkbox" name="Checkbox1" />
<label for="Checkbox1"> אני מעוניין לקבל פרסומות</label>

ניתן לראות מכאן שהוגדרו ב – HTML שני אלמנטים, האחד הוא ה – Checkbox עצמו שמוגדר על-ידי פקד input והשני הוא ה – label (שימו לב, זהו label של HTML ולא של ASP.NET) המכיל את הכיתוב שליד ה – CheckBox ומקושר אליו ע"י המאפיין for שלו.

RadioButton – לחצן רדיו

הפקד הזה מופיע בדרך כלל בקבוצות כאשר המשתמש יכול לסמן אחד מהלחצנים בקבוצה, לדוגמא:

נוכל לגרור את ה – RadioButton מתוך ה – Toolbox, וסביר להניח שנרצה בוודאי לגרור אותו כמה פעמים. בתוך הדף הגדרת הפקדים תראה כך:

<asp:RadioButton ID="RadioButton0" Text="0-4" 
  GroupName="group1" runat="server" />
<asp:RadioButton ID="RadioButton1" Text="4-8" 
  GroupName="group1" runat="server" />
<asp:RadioButton ID="RadioButton2" Text="8-12" 
  GroupName="group1" runat="server" />
<asp:RadioButton ID="RadioButton3" Text="12-16" 
  GroupName="group1" runat="server" />

שימו לב שלכל אחד מלחצני הרדיו יש ID אחר. על מנת שלחיצה על אחד תבטל את האחרים, עלינו לתת להם אותו ערך במאפיין GroupName.

אם נסתכל על ה-HTML שנוצר בעמוד נראה את המבנה הבא:

<input id="Radio1" type="radio" name="group1" 
  value="RadioButton0" />
<label for="RadioButton0">0-4</label>
<input id="Radio2" type="radio" name="group1" 
  value="RadioButton1" />
<label for="RadioButton1">4-8</label>
<input id="Radio3" type="radio" name="group1" 
  value="RadioButton2" />
<label for="RadioButton2">8-12</label>
<input id="Radio4" type="radio" name="group1" 
  value="RadioButton3" />
<label for="RadioButton3">12-16</label>

שימו לב גם כאן ל –label ליד כל radio button, כמו כן שימו לב לכך שמה שכתבנו ב – GroupName מגיע ל – name, ומה שכתבנו ב – ID מגיע ל – value.

DropdownList – רשימה נגללת

בדומה ללחצני הרדיו, גם כאן המשתמש צריך לבחור בדבר אחד מתוך רשימה, אלא שכאן הרשימה כולה מוסתרת למעט מה שנבחר, ונגלית בלחיצה על חץ.

הגדרת הפקד בדף תראה כך:

<asp:DropDownList runat="server" ID="ddlAge">
</asp:DropDownList>

כעת הגדרנו רשימה ריקה, על מנת להוסיף לרשימה פריטים נשתמש ב – ListItem עבור כל פריט, כך שהגדרת הפקד תראה כך:

<asp:DropDownList runat="server" ID="DropDownList1">
  <asp:ListItem Text="0-4" Value="0" />
  <asp:ListItem Text="4-8" Value="1" />
  <asp:ListItem Text="8-12" Value="2" />
  <asp:ListItem Text="12-16" Value="3" />
</asp:DropDownList>

כאשר ה – Text הוא מה שמוצג למשתמש, וה – Value הוא מה שישלח לשרת במידה והפריט יבחר.

נתבונן כעת ב – HTML שנוצר כתוצאה מה – DropDownList:

<select name="ddlAge" id="Select1">
  <option value="0">0-4</option>
  <option value="1">4-8</option>
  <option value="2">8-12</option>
  <option value="3">12-16</option>
</select>

כאן אנחנו יכולים לראות שאת ה – DropDownList מייצגת תגית select (לעומת ה – input אותו ראינו בשאר הפקדים) וכל ListItem מיוצג ע"י תגית option, כאשר ה – value שלו מקביל ל – Value אותו הגדרנו וה – Text אותו הגדרנו נמצא בין התג הפותח והסוגר של כל option.

ניתן לקרוא עוד אודות פקדים ב – HTML במאמר מדריך HTML – טפסים.