INTRODUCTION TO HTML - UNIT 5
INTRODUCTION TO HTML - UNIT 5
UNIT – 5
FRAMES:
HTML <frame> tag define the particular area within an HTML file where
another HTML web page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple
sections or frames, and each frame can contain different web pages.
Syntax
Display Block
Usage Frames
Example 1
OUTPUT:
Frame1.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #7fffd4;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is first frame</h2>
14. </div>
15. </body>
16. </html>
Frame2.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #2f4f4f;
7. height: 500px;
8.
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <h2>This is Second frame</h2>
15. </div>
16. </body>
17. </html>
Frame3.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #c1ffc1;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is Third frame</h2>
14. </div>
15. </body>
16. </html>
Example 2:
OUTPUT:
Attribute
Tag-specific attribute
marginheight pixels It specifies the top and bottom margins of the frame.
An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone number, etc. .
HTML forms are required if you want to collect some data from of the site
visitor.
For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent
to the given address.
Tag Description
Tag Description
The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to web
server such as text field, text area, password field, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
HTML <input> element
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
OUTPUT:
HTML TEXTFIELD CONTROL
The type="text" attribute of input tag creates textfield control also known as
single line textfield control. The name attribute is optional, but it is required for the
server side component such as JSP, ASP, PHP etc.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
OUTPUT:
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>
Output:
If you click on the label tag, it will focus on the text control. To do so, you
need to have for attribute in label tag that must be same as id attribute of input tag.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
Output:
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>
Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
OUTPUT:
The radio button is used to select one option from multiple options. It is used
for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be
selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a
time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Femal
e <br/>
5. </form>
OUTPUT:
CHECKBOX CONTROL
The checkbox control is used to check multiple options from given checkboxes.
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/
>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
OUTPUT:
Syntax:
The value attribute can be anything which we write on button on web page.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>
OUTPUT:
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>
Output:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br
>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <
br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <b
r/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
OUTPUT: