### **Day 1: Text Input (`<input type="text">`)**
1. **What it is:**
A text input lets you type words or numbers into a form.
2. **Where to use it:**
* Asking for your name
* Asking for your favorite color
* Asking for your age
3. **How to create it:**
```html
<form>
Name: <input type="text" name="username">
</form>
```
**Classwork:**
* Create a form that asks for your name.
* Try typing your name and seeing it appear in the box.
---
### **Day 2: Password Input (`<input type="password">`)**
1. **What it is:**
A password input hides what you type so others cannot see it.
2. **Where to use it:**
* Login pages
* Secret messages
3. **How to create it:**
```html
<form>
Password: <input type="password" name="userpassword">
</form>
```
**Classwork:**
* Create a password form.
* Type your secret password and notice the dots appear instead of letters.
---
### **Day 3: Radio Buttons (`<input type="radio">`)**
1. **What it is:**
Radio buttons let you choose **only one option** from a group.
2. **Where to use it:**
* Selecting your gender (Male/Female)
* Choosing your favorite fruit (Apple, Banana, Orange)
3. **How to create it:**
```html
<form>
Favorite Fruit:
<input type="radio" name="fruit" value="Apple"> Apple
<input type="radio" name="fruit" value="Banana"> Banana
<input type="radio" name="fruit" value="Orange"> Orange
</form>
```
**Classwork:**
* Make a form for picking your favorite fruit.
* Try selecting one fruit and see only one can be chosen.
---
### **Day 4: Checkboxes (`<input type="checkbox">`)**
1. **What it is:**
Checkboxes let you choose **more than one option**.
2. **Where to use it:**
* Choosing hobbies (Reading, Drawing, Playing)
* Selecting favorite colors
3. **How to create it:**
```html
<form>
Hobbies:
<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Drawing"> Drawing
<input type="checkbox" name="hobby" value="Playing"> Playing
</form>
```
**Classwork:**
* Create a form for hobbies.
* Try checking multiple boxes.
---
### **Day 5: Dropdown (`<select>`)**
1. **What it is:**
A dropdown lets you pick **one option** from a list.
2. **Where to use it:**
* Choosing your country
* Picking a school subject
3. **How to create it:**
```html
<form>
Choose a subject:
<select name="subject">
<option value="Math">Math</option>
<option value="Science">Science</option>
<option value="English">English</option>
</select>
</form>
```
**Classwork:**
* Make a dropdown for school subjects.
* Try picking a subject.
---
### **Day 6: Text Area (`<textarea>`)**
1. **What it is:**
A text area is a **big box** to write long text.
2. **Where to use it:**
* Writing a story
* Giving feedback
3. **How to create it:**
```html
<form>
Write your story:
<textarea name="story" rows="4" cols="50"></textarea>
</form>
```
**Classwork:**
* Create a text area and write a short story.
---
### **Day 7: Submit Button (`<input type="submit">`)**
1. **What it is:**
A submit button **sends the form** when clicked.
2. **Where to use it:**
* Sending answers
* Sending registration information
3. **How to create it:**
```html
<form>
<input type="submit" value="Send">
</form>
```
**Classwork:**
* Add a submit button to any form you created.
* Click it and see what happens.
---
### **Day 8: Form Combination (All Together)**
1. **What it is:**
You can put many form elements together in **one form**.
2. **Where to use it:**
* Registration forms
* Surveys
3. **How to create it:**
```html
<form>
Name: <input type="text" name="username"><br>
Password: <input type="password" name="userpassword"><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br>
Hobbies:
<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Drawing"> Drawing<br>
Favorite Subject:
<select name="subject">
<option value="Math">Math</option>
<option value="Science">Science</option>
<option value="English">English</option>
</select><br>
Story: <textarea name="story" rows="4" cols="50"></textarea><br>
<input type="submit" value="Send">
</form>
```
**Classwork:**
* Combine everything you learned into one b
ig form.
* Test each part and make sure it works.
0 comments:
Post a Comment