Overview of HTML forms and their various elements. Here's a comprehensive guide to HTML forms, attributes, and elements.
HTML Forms
HTML forms are used to collect user input. They are enclosed within <form> tags.
Basic Structure
<form action="submit_form.php" method="post">
<!-- Form elements go here -->
</form>
HTML Form Attributes
- action: Specifies where to send the form data.
- method: Specifies the HTTP method to use (GET or POST).
- enctype: Specifies the encoding type when submitting the form (application/x-www-form-urlencoded, multipart/form-data, or text/plain).
- target: Specifies where to display the response (e.g., _blank, _self, _parent, _top)
HTML Form Elements
Forms can contain various types of input elements:
- Text Input: Single-line text input.
<input type="text" name="username">
- Password Input: Single-line password input.
<input type="password" name="password">
- Radio Buttons: For selecting one option from a set.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
- Checkboxes: For selecting multiple options from a set.
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car
- Submit Button: To submit the form.
<input type="submit" value="Submit">
- Reset Button: To reset the form fields.
<input type="reset" value="Reset">
- File Input: To upload files.
<input type="file" name="file">
HTML Input Types
Here are some common input types:
- text
- password
- submit
- reset
- radio
- checkbox
- button
- file
- hidden
- image
- date
- number
- range
- search
- tel
- url
HTML Input Attributes
Common attributes used with <input> elements:
- name: Specifies the name of an input element.
- value: Specifies the value of an input element.
- placeholder: Specifies a short hint inside the input field.
- required: Specifies that an input field must be filled out before submitting the form.
- readonly: Specifies that an input field is read-only.
- disabled: Specifies that an input field is disabled.
- maxlength: Specifies the maximum length of an input field.
- size: Specifies the width of an input field
HTML Input Form Attributes
- form: Associates the input with a form element by its id.
- formaction: Specifies the URL for form submission.
- formenctype: Specifies how form data should be encoded.
- formmethod: Specifies the HTTP method for form submission.
- formnovalidate: Specifies that the form should not be validated when submitted.
- formtarget: Specifies where to display the response after form submission.
- The <textarea> element is used for multi-line text input.
<textarea name="message" rows="10" cols="30">
Your message here...
</textarea>
- The <button> element defines a clickable button.
<button type="submit">Submit</button>
<button type="button" onclick="alert('Hello')">Click Me!</button>
- The <select> element is used to create a drop-down list.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- The <label> element is used to define labels for input elements.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Here's a complete example of an HTML form using various elements and attributes:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<form action="submit_form.php" method="post" enctype="multipart/form-data">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="gender">Gender:</label>
<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="vehicle">Select your vehicles:</label><br>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br><br>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50">Your message here...</textarea><br><br>
<input type="file" name="file"><br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
No comments:
Post a Comment