Scribd
Upload
7 views

Lecture 5

Uploaded by

Siddharth Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Lecture 5

Uploaded by

Siddharth Chauhan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Nested table in HTML

 To create a nested table, we need to create a table using the <table> tag. This table is known as
the outer table. The second table that will be nested table is called the inner table. This table is
also created using the <table> tag but there is a special thing that must be kept in mind.
 Note: The inner table always has to be placed between the <td> ….. </td> of the outer table.

<html>

<body>
<table border="2" bordercolor="green">
<tr>
<td>Table 1</td>
<td> Table 1
<table border="2" bordercolor="blue">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td> Table 2 </td>
<td>Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> Table 1 </td>
<td> Table 1. </td>
</tr>
</table>
</body>

</html>
<html>

<body>
<h2 style="color:green">Table Example </h2>
<p><b>Nested tables</b></p>

<table border="2" bordercolor="green">


<tr>
<td>main Table row 1 column 1</td>
<td>main Table column 2
<table border="2" bordercolor="blue">
<tr>
<td>inner Table row 1 column 1</td>
<td>inner Table row 1 column 2</td>
</tr>
<tr>
<td>inner Table row 2 column 1 </td>
<td>inner Table row 2 column 2</td>
</tr>
<tr>
<td>inner Table row 3 column 1 </td>
<td>inner Table row 3 column 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> main Table row 2 column 1 </td>
<td> main Table row 2 column 2 </td>
</tr>
</table>
</body>

</html>
HTML Forms

An HTML form is used to collect user input. The user


input is most often sent to a server for processing.
The <form> element is a container for different types
of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways,
depending on the type attribute.
The <input> Element

Type Description

<input type="text"> Displays a single-line text input


field
<input type="radio"> Displays a radio button (for
selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting


zero or more of many choices)

<input type="submit"> Displays a submit button (for


submitting the form)

<input type="button"> Displays a clickable button


Here are the different input types you can use in HTML:
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
Input Type Text
<input type="text"> defines a single-line text input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Input Type Password
<input type="password"> defines a password field:

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<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="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Input Type Button
<input type="button"> defines a button:

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

On clicking click me button – Hello World will be displayed on web browser


Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields


that should contain a date.</p>

<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Internet


Explorer 11 or prior Safari 14.1.</p>

</body>
</html>
Input Type Email
The <input type="email"> is
used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for


input fields that should contain an e-mail address:</p>

<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Image
The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
<!DOCTYPE html>
<html>
<body>

<h2>Display an Image as the Submit button</h2>

<form action="/action_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y


coordinates of the click that activated the image button.</p>

</body>
</html>
<body> The <fieldset> tag is used to group related
<h2>Registration form</h2>
<form> elements in a form. The <fieldset>
tag draws a
<fieldset> box around the related elements.
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
Type Number
This type of input lets the user insert numbers only.

<input type="number" placeholder="Enter a


number" />
Type File
This defines a field for file submission. When a
user clicks it, they are prompted to insert the
desired file type, which might be an image,
PDF, document file, and so on.

<input type="file" />


Type Search
Input with the type of search defines a text field just like
an input type of text. But this time it has the sole
purpose of searching for info. It is different from type
text in that, a cancel button appears once the user starts
typing.

<input type="search" />


Type Date
You might have registered on a website where you
requested the date of a certain event. The site probably
used an input with the type value set to date to acheive
this.
<input type="date" />
Type Datetime-local
This works like the input type date, but it also lets the user pick a date
with a particular time.

<input type="datetime-local" />


Type Week
The input type of week lets a user select a specific week.

<input type="week" />

Type Month
The input with the type of month populates months for the user to pick from
when clicked.
<input type="month" />
Textarea
There are times when a user will need to fill in
multiple lines of text which wouldn't be suitable in an
input type of text (as it specifies a one-line text field).
textarea lets the user do this as it defines multiple lines
of text input. It takes its own attributes such as cols –
for the number of columns, and rows for the number of
rows.

<textarea cols="50" rows="20"></textarea>


Multiple Select Box
This is like a radio button and checkbox in one
package. It is embedded in the page with two elements
– a select element and an option, which is always
nested inside select.
By default, the user can only pick one of the options.
But with multiple attributes, you can let the user select
more than one of the options.
<select>
<option value="HTML">Select a Language</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>
<body bgcolor="white">
<form align="center">

<h3 style="color:black">Personal Details</h3>


Name:
<input type="text" name="name" id="name"><br><br>
Password:
<input type="password" name="password" id="password"><br><br>

E-mail id: <input type="text" name="name" id="name"><br><br>


Gender: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Male
<input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Female<br><br>
Contact#: <input type="text" name="mobile" id="mobile">

<h3 style="color:black">Educational Qualification</h3>

Degree: <select name="degree" id="degree">


<option selected>-- Select Group --</option>
<option>B.Com</option>
<option>B.sc</option>
<option>B.com Computers</option>
<option>B.A</option>
</select><br>
<br>
Engineering: <select name="eng" id="eng">
<option selected>-- Select Group --</option>
<option>CSE</option>
<option>ECE</option>
<option>CIVIL</option>
<option>EEE</option>
</select><br><br>
Hobbies: <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1">Playing chess
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup2">Reading Books<br><br>
<h3 style="color:black">Address</h3>
<textarea name="textarea" cols="35" rows="5" id="textarea"></textarea><br>
<br>
Attch Resume: <input type="file" name="fileField" id="fileField"><br><br>

<input type="Submit" >


</form>
</body>
</html>

You might also like