html notes
html notes
Type: Specifies the type of input, such as text, password, checkbox, radio,
and more.
Name: Assigns a name to the input field, crucial for form submission.
Placeholder: Provides a hint or example text for users to understand the
expected input.
1. Text Input
This creates a single-line text input where users can enter alphanumeric
text.
<input type="text" name="username" placeholder="Enter your
username">
2. Password Input
This is similar to text input but masks the entered characters for security
purposes, commonly used for password input.
<input type="password" name="password" placeholder="Enter your
password">
3. Checkbox
Creates a checkbox that users can check or uncheck.
<input type="checkbox" name="subscribe" value="yes"> Subscribe to
newsletter
4. Radio Button
Radio buttons are used when users need to select only one option from a
group of options (all radio buttons with the same name).
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
5. Number Input
Provides a numeric input field. The min and max attributes set the allowed
range.
<input type="number" name="quantity" min="1" max="10" value="1">
6. Date Input
Allows users to select a date from a date picker.
<input type="date" name="birthdate">
7. Email Input
Validates that the entered text is in the form of an email address.
<input type="email" name="useremail" placeholder="Enter your
email">
8. URL Input
Validates that the entered text is in the form of a URL.
<input type="url" name="website" placeholder="Enter your website
URL">
9. File Input
Allows users to upload a file. This will display a file selection dialog when
clicked.
<input type="file" name="fileupload">
The semantic HTML tags help the search engines and other user devices to determine the
importance and context of web pages.
The pages made with semantic elements are much easier to read.
<article>: This element contains the main part, containing information about the web page.
Tags Explanation
The <aside> element defines some content aside from the content it is
<aside>
placed in (like a sidebar).
<main> This specifies the main page content and should be unique.
<summary
This specifies a header for the <details> element.
>