HTML Forms
HTML Forms
HTML forms are a section of a web page that allows users to input data and interact with the website. A form can contain a variety of input elements, such as text boxes, radio buttons, checkboxes, and drop-down lists, that allow users to submit information to the website.
When a user submits a form, the data is typically sent to the server for processing. The server-side script can then take the user’s input and perform various actions based on the data received.
Forms are typically defined using the <form> tag in HTML, which specifies the action and method of the form submission, as well as any input elements that are part of the form. Input elements are defined using a variety of tags, such as <input>, <textarea>, and <select>, each with its own set of attributes that define the type of data that can be entered and how it should be processed.
In this form, we’ve used several attributes to modify its behavior:
- action: This attribute specifies the URL where the form data should be submitted when the user clicks the Submit button. In this case, we’re submitting the data to “/submit-form”.
- method: This attribute specifies the HTTP method that should be used for the form submission. The two most common methods are “get” and “post”. In this case, we’re using “post”.
- autocomplete: This attribute specifies whether the browser should remember user input for this form. In this case, we’re turning off autocomplete using the value “off”.
- target: This attribute specifies where the form data should be displayed when submitted. In this case, we’re opening the form submission in a new tab using the value “_blank”.
Other attributes that can be used with forms include enctype, which specifies the encoding type used for the form data, name, which specifies a name for the form that can be used to reference it in JavaScript or CSS, and novalidate, which specifies that the form should not be validated by the browser.
Here’s an example of an HTML form with various attributes:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Form</title>
</head>
<body>
<h1>Contact Form</h1>
<form action="/submit-form" method="post" autocomplete="off" target="_blank">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Html Form Control
HTML form controls are interactive elements that allow users to input data and interact with a website. There are several types of form controls in HTML, including:
- Text input: Allows users to input text into a field, such as a name or email address.
<input type="text" name="name" placeholder="Enter your name">
- Checkbox: Allows users to select one or more options from a list of choices.
<label>Choose your interests:</label>
<input type="checkbox" name="interests" value="sports">Sports
<input type="checkbox" name="interests" value="music">Music
<input type="checkbox" name="interests" value="reading">Reading
- Radio button: Allows users to select one option from a list of choices.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
- Select: Allows users to select one option from a drop-down menu.
<select name="country">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
- Text area: Allows users to input longer text, such as comments or feedback.
<textarea name="comments" placeholder="Enter your comments"></textarea>
- Submit button: Allows users to submit the form data to the server.
<input type="submit" value="Submit">
These form controls can be used to collect various types of data from users, such as user information, survey responses, or product orders.
- Radio box: A radio box allows users to select one option from a group of options. Each radio box in a group must have the same name attribute so that only one option can be selected at a time. Here’s an example:
<label>Choose a color:</label>
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
9.File Upload Box: A file upload box is an HTML form control that allows users to select and upload files from their local computer to a server. This is useful for websites that need to collect files from users, such as images, documents, or videos.
The file upload box is defined using the <input> tag with the type attribute set to “file”. Here’s an example:
<label>Upload a file:</label>
<input type="file" name="myfile">