Today i have learned about the html forms. to get the datas from the users we create a html forms.
- A form is created using the form tag, which acts as a container for various interactive elements. common elements of forms:
<label>, <input>, <textarea>, <select>, <button>
- The label tag in HTML provides a caption or description for form elements like input, textarea, or select. It improves usability by making the clickable area for a form control larger and is essential for accessibility, as it allows screen readers to describe what a field is for to visually impaired users.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username">
- The input tag in HTML is a fundamental element used to create interactive controls in web forms to collect data from users. It is an "empty" or self-closing element, meaning it does not require a closing tag.
Essential Attributes
name: Acts as an identifier for the data when it is submitted to a server. Only inputs with a name attribute will have their values passed.
value: Sets the initial or default value of the field.
placeholder: Displays a short hint (about the field) inside the field before the user types.
required: A boolean attribute that prevents form submission if the field is empty.
id: Used to uniquely identify the element, often for styling with CSS or linking to a label tag for accessibility.
Example
<form action="/submit-data" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="user_name" placeholder="Enter username" required>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="user_password" required>
<input type="submit" value="Log In">
</form>
- The textarea tag in HTML creates a multi-line text input field, typically used in forms for comments, reviews, or messages. Unlike the standard input, which only allows a single line, the textarea element can hold an unlimited number of characters and respects line breaks.
Basic Syntax
The initial content is placed between the opening and closing tags.
<textarea name="message" rows="4" cols="50">
Enter your comments here...
</textarea>
select and option Creates drop-down menus for selecting from a list of predefined choices.
select: Acts as a container for the dropdown menu.
option: Defines the individual items available for selection within that menu.
Example
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- The button tag in HTML is used to create a clickable button on a webpage. Unlike the input element, the button tag can contain complex content between its opening and closing tags, such as text, images, and other HTML tags like i or strong.
Basic Syntax
<button type="button">Click Me!</button>
by using all these tags and attributes today i create a student registration form, which include all these tags and properties to get the datas from user i build it by using html and css.
Top comments (0)