- Introduction To HTML
- HTML Elements And Tags
- Text Formatting And Styling
- Images And Multimedia
- Hyperlinks And Anchors
- Tables And Forms
- HTML5 Semantic Elements
- Responsive Design And Meta Tags
- Embedded Content And APIs
- Canvas
- Drawing Basic Shapes
- Working With Text And Fonts
- Working With Images
- Canvas Transformations
- Working With Animation
- Interactivity And Event Handling
- Canvas Advanced
- Introduction To SVG
- SVG Gradients And Patterns
- SVG Transformations And Transitions
- SVG Filters And Effects
- SVG Paths And Bezier Curves
- SVG Icons And Illustrations
- SVG Responsive Design And Accessibility
Tables and Forms
Creating Tables To Display Data In Rows And Columns
Basic Table Structure:
A basic HTML table consists of the following elements:
<table>: The container element for the entire table.<tr>:Defines a row within the table.<th>:Defines a header cell within a row.<td>:Defines a standard cell within a row.
Example:
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
Table Headers and Data:
In HTML tables, the <th> element is used to define header cells, while the <td> element is used to define standard data cells.
Example:
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>UK</td>
</tr>
</table>
Table Captions:
You can add a caption to a table using the <caption> element. Captions provide a brief description or title for the table.
Example:
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Department</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>IT</td>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Marketing</td>
</tr>
</table>
Table Borders and Styling:
You can use CSS to style tables, including adding borders, changing cell colors, and adjusting text alignment.
Example:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
Spanning Rows and Columns:
You can merge multiple cells to span rows or columns using the colspan and rowspan attributes.
Example:
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
</table>
Accessibility Considerations:
When creating tables, ensure they are accessible to all users, including those using screen readers. Use appropriate markup, provide meaningful captions and headers, and use ARIA attributes if necessary.
Practice Excercise Practice now
Building Forms To Collect User Input With Input Fields, Buttons, And Labels
Basic Form Structure:
A basic HTML form consists of the following elements:
<form>: The container element for the form.<input>:Defines an input field within the form.<label>:Associates a label with an input field.<button>:Creates a button for form submission.
Example:
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">Submit</button>
</form>
Input Fields:
HTML provides various input types for different types of data, such as text, email, password, number, date, and more. Each input type has specific attributes and validation rules.
Example:
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100">
Labels:
Labels provide a text description for input fields, improving accessibility and user experience. They should be associated with their corresponding input fields using the for attribute or by wrapping the input field within the <label> element.
Example:
<input type="text" id="username" name="username" required>
Buttons:
Buttons are used to submit or reset the form, trigger actions, or perform other operations within the form.
Example:
<button type="reset">Reset</button>
Form Validation:
HTML5 introduced built-in form validation features that allow browsers to validate input fields without the need for JavaScript. You can use attributes like required, pattern, min, max, etc., to specify validation rules.
Example:
Styling Forms:
You can style forms using CSS to enhance their appearance and align them with your website's design.
Example:
form {
width: 50%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input, button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
Practice Excercise Practice now
Validating Form Data With HTML Attributes And JavaScript
HTML Form Validation Attributes:
HTML5 introduced several form validation attributes that browsers can use to validate input fields without the need for JavaScript. These attributes include required, pattern, min, max, type, etc.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
<button type="submit">Submit</button>
</form>
In this example:
- The required attribute ensures that the input field must be filled out before submitting the form.
- The type="email" attribute specifies that the input must be a valid email address.
- The minlength="8" attribute specifies that the password must be at least 8 characters long.
JavaScript Form Validation:
While HTML form validation attributes are helpful, JavaScript provides more control and customization options for validating form data. You can use JavaScript to perform custom validation logic, display error messages, and handle form submission events.
Example:
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var age = document.getElementById("age").value;
var ageError = document.getElementById("ageError");
if (age < 18) {
ageError.textContent = "Age must be 18 or older.";
return false;
} else {
ageError.textContent = "";
return true;
}
}
</script>
In this example:
- The onsubmit attribute of the form element calls the validateForm() function when the form is submitted.
- The validateForm() function retrieves the value of the age input field and checks if it's less than 18.
- If the age is less than 18, an error message is displayed, and the form submission is prevented by returning false.
- Combining HTML and JavaScript Validation:
- You can combine HTML form validation attributes with JavaScript validation for enhanced validation capabilities and cross-browser compatibility.
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" style="color: red;"></span>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var usernameError = document.getElementById("usernameError");
if (username.length < 5) {
usernameError.textContent = "Username must be at least 5 characters long.";
return false;
} else {
usernameError.textContent = "";
return true;
}
}
</script>
Practice Excercise Practice now
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP