HTML : 7 : HTML Elements
HTML Elements
✅ 1. Text Box (Input field)
Used to accept user input (like name, email, etc.)
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Other types:
<input type="email">
<input type="password">
<input type="number">
<input type="date">
✅ 2. Button
Used to submit a form, reset it, or trigger JavaScript.
<!-- Submit button -->
<button type="submit">Submit</button>
<!-- Regular clickable button -->
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
<!-- Reset button -->
<button type="reset">Reset</button>
✅ 3. Dropdown / Select Box
Used to choose one option from a list.
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="in">India</option>
</select>
✅ 4. Textarea (Multiline text box)
For long inputs like comments or messages.
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
✅ 5. Full Form Example
<!DOCTYPE html>
<html>
<head>
<title>Form Elements Demo</title>
</head>
<body>
<h2>User Information Form</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br><br>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="us">USA</option>
<option value="ca">Canada</option>
<option value="in">India</option>
</select><br><br>
<label for="bio">Short Bio:</label><br>
<textarea id="bio" name="bio" rows="5" cols="40"></textarea><br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
🔤 Text Elements
| Element | Code Snippet |
|---|---|
| Heading (H1-H6) | <h1>Heading 1</h1> to <h6>Heading 6</h6> |
| Paragraph | <p>This is a paragraph.</p> |
| Line Break | Line one<br>Line two |
| Horizontal Rule | <hr> |
🔠 Text Formatting
| Format | Code Snippet |
|---|---|
| Bold | <b>Bold Text</b> or <strong>Bold</strong> |
| Italic | <i>Italic Text</i> or <em>Italic</em> |
| Underline | <u>Underlined Text</u> |
| Highlighted | <mark>Highlighted</mark> |
| Small Text | <small>Small text</small> |
🖼️ Image & Links
| Element | Code Snippet |
|---|---|
| Image | <img src="image.jpg" alt="Description" width="200"> |
| Hyperlink | <a href="https://example.com">Visit Site</a> |
📋 Lists
| List Type | Code Snippet |
|---|---|
| Unordered List | <ul><li>Item 1</li><li>Item 2</li></ul> |
| Ordered List | <ol><li>First</li><li>Second</li></ol> |
📊 Table
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>
</table>
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>
</table>
📝 Form Elements
| Element | Code Snippet |
|---|---|
| Text Box | <input type="text" name="username"> |
| Password Box | <input type="password" name="pass"> |
| Email Input | <input type="email" name="email"> |
| Textarea | <textarea rows="4" cols="30"></textarea> |
| Radio Button | <input type="radio" name="gender" value="male"> Male |
| Checkbox | <input type="checkbox" name="skill" value="html"> HTML |
| Dropdown (Select) | <select><option>Option 1</option></select> |
| Submit Button | <button type="submit">Submit</button> |
| Reset Button | <button type="reset">Reset</button> |
🧱 Layout & Structure
| Section | Code Snippet |
|---|---|
| Header | <header><h1>Site Title</h1></header> |
| Navigation | <nav><a href="#">Home</a></nav> |
| Article | <article><p>Post content</p></article> |
| Section | <section><h2>Section Title</h2></section> |
| Footer | <footer><p>© 2025</p></footer> |
⚡ Bonus (For Selenium Practice)
Make sure to add id or name attributes to elements to easily locate them in Selenium:
<input type="text" id="username" name="username">
In Selenium:
driver.findElement(By.id("username")).sendKeys("myUser")
Thanks
Comments
Post a Comment