Scribd
Upload
6 views

Inputs Tags

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Inputs Tags

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

WEB APPLICATION DEVELOPMENT

Introduction to HTML
HTML (HyperText Markup Language) is the standard
language used to create webpages. It defines the structure
of web content and works with browsers to display text,
images, links, and more.

1. Basic Structure of an HTML Document


Every HTML document follows a specific structure.
Here’s the basic template:

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<-- Page content goes here -->
</body>
</html>
Explanation:
 <!DOCTYPE html>: Tells the browser this is an
HTML5 document.
 <html>: The root element containing all the content.
 <head>: Contains metadata (e.g., title, CSS, scripts).
 <title>: Sets the title shown on the browser tab.
 <body>: Contains the visible content of the
webpage.
2. Headings
HTML provides six levels of headings, from <h1> to
<h6>.

<h1>This is a Main Heading</h1>


<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>
Explanation:
 <h1> is the largest and most important heading.
 <h6> is the smallest.

3. Paragraphs
Use the <p> tag to create paragraphs.
<p>This is a paragraph of text. HTML makes it easy to
structure and organize your content.</p>
Explanation:
 The <p> tag defines a block of text.
4. Text Formatting Tags
HTML provides several tags to format text.
Tag Usage Example
<b> Bold text <b>Bold Text</b> → Bold Text
<i> Italic text <i>Italic Text</i> → Italic Text
Underlined <u>Underlined Text</u> → Underlined
<u>
text Text

5. Hyperlinks
Links are created with the <a> tag.

<a href="https://www.google.com" >Visit Google</a>


Explanation:
 href: Specifies the URL to link to.

6. Images
Use the <img> tag to display images.

<img src="example.jpg" alt="Description of Image"


width="300" height="200">
Explanation:
 src: Path to the image file.
 alt: Alternative text for accessibility or when the
image fails to load.
 width and height: Set the image size.

Example: A Simple Webpage


<!DOCTYPE html>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<h2>About HTML</h2>
<p>HTML is the foundation of the web. It allows us to
create structured documents and add content like text,
links, and images.</p>

<h3>Text Formatting</h3>
<p>You can use <b>bold</b>, <i>italic</i>, or
<u>underlined</u> text to highlight content.</p>

<h3>Links</h3>
<p>Visit my favorite website: <a
href="https://www.wikipedia.org" t>Wikipedia</a>.</p>

<h3>Images</h3>
<img src="https://via.placeholder.com/300x200"
alt="Sample Image" width="300" height="200">
</body>
</html>
Different types of HTML inputs
Tags

The <input> tag has various types, each providing a


specific function:

Type Description
text A single-line text input.
Input that masks the text (e.g., for
password
passwords).
Allows the user to select a color from a
color
color picker.
file Lets the user upload files from their system.
Allows selection of one option from a group
radio
of predefined choices.
Lets the user select one or more options
checkbox
independently.
Creates a clickable button with no default
button
behavior.
A button that submits the form data to the
submit
server.
A button that resets all form fields to their
reset
default values.
Input field for email addresses, with built-
email
in validation.
number Input field for numerical values with
Type Description
optional min, max, and step attributes.
Input field for URLs, with built-in
url
validation.
tel Input field for telephone numbers.
date Input field for selecting a date.
A slider control for selecting a value within
range
a specified range.
A text field designed for search
search
functionality.

Different Types of <input> Tags in HTML


The <input> tag in HTML is used to create various types
of input fields in forms. The functionality of each input
depends on the type attribute.

1. type="text"
Creates a single-line text input field.

<label for="username">Username:</label>
<input type="text" id="username" name="username"
placeholder="Enter your username">
 Use Case: Collect names, titles, or general text.
 Example Output:
A text box where users can type anything.
2. type="password"
Creates a password field that hides the input characters.
<label for="password">Password:</label>
<input type="password" id="password"
name="password" placeholder="Enter your password">
 Use Case: Securely collect passwords.
 Example Output:
A text box with hidden characters (e.g., ***).

3. type="email"
Validates input as an email address format.
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email">
 Use Case: Collect email addresses.
 Example Output:
A text box that checks for "@" and "." in the input.

4. type="number"
Allows input of numeric values only.
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1"
max="100">
 Use Case: Collect ages, quantities, or other
numbers.
 Example Output:
A number input box with optional up/down arrows.

5. type="tel"
Used for telephone numbers.
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-456-7890">
 Use Case: Collect phone numbers.
 Example Output:
A text box optimized for numeric keypad input on
mobile.

6. type="url"
Validates input as a URL.
<label for="website">Website:</label>
<input type="url" id="website" name="website"
placeholder="https://example.com">
 Use Case: Collect website URLs.
 Example Output:
A text box that ensures input includes "http://" or
"https://".

7. type="checkbox"
Allows the user to select one or more options.
<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe"
name="subscribe" value="yes">
 Use Case: Agreeing to terms, selecting preferences.
 Example Output:
A small checkable box.

8. type="radio"
Allows selection of one option from a group.
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
 Use Case: Choose a single option (e.g., gender,
payment method).
 Example Output:
Circular buttons where only one can be selected.
9. type="file"
Allows the user to upload a file.

<label for="file">Upload File:</label>


<input type="file" id="file" name="file">
 Use Case: Upload documents, images, or other files.
 Example Output:
A "Choose File" button to upload files.

10. type="date"
Provides a date picker.
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
 Use Case: Collect dates like birthdate, event dates.
 Example Output:
A calendar popup for date selection.

11. type="color"
Allows the user to pick a color.
<label for="color">Pick a Color:</label>
<input type="color" id="color" name="color">
 Use Case: Select colors for themes or designs.
 Example Output:
A color picker tool.

12. type="submit"
Creates a button to submit the form.
<input type="submit" value="Submit">
 Use Case: Send form data to the server.
 Example Output:
A clickable button labeled "Submit."

13. type="reset"
Creates a button to reset the form fields.
<input type="reset" value="Reset">
 Use Case: Clear all form inputs.
 Example Output:
A button labeled "Reset."

14. type="button"
Creates a clickable button with customizable
functionality.
<button type="button" onclick="alert('Button
Clicked!')">Click Me</button>
 Use Case: Custom interactions like pop-ups or
navigation.
 Example Output:
A button that performs custom actions.

Example Form Combining All Inputs


html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Input Types Example</title>
</head>
<body>
<h1>HTML Input Types</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username"
name="username" placeholder="Enter your
username"><br><br>

<label for="password">Password:</label>
<input type="password" id="password"
name="password" placeholder="Enter your
password"><br><br>

<label for="email">Email:</label>
<input type="email" id="email"
name="email"><br><br>

<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label><br><br>

<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe"
name="subscribe" value="yes"><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob"
name="dob"><br><br>

<label for="color">Favorite Color:</label>


<input type="color" id="color"
name="color"><br><br>

<label for="file">Upload File:</label>


<input type="file" id="file" name="file"><br><br>

<input type="submit" value="Submit">


<input type="reset" value="Reset">
</form>
</body>
</html>

You might also like