Web Form In HTML
Sometimes, we visit the many sites, and we found many web forms or user forms where we give information like Name, DOB, Gender, Email, etc. And this information is stored on a web server after successful form submission. This is also an important task for a web developer to know about web form and its tool.
Web Form:
Web Form: A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. The elements used in an HTML form are textbox, checkbox, input box, radio buttons, submit buttons, etc. Using these elements, the information of a user is submitted on a web server.
Form <from> Tag: The form<form> tag is used to create an HTML form. The data of web form is sent by two methods in URL (HTTP method="get") and (HTTP method="post").
HTTP "GET" Method:
ØThis method appends the form-data to the URL in name/value pairs.
ØThis method is useful for form submissions where a user wants to bookmark the result.
ØThere is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred.
ØNever use the HTTP "GET" method to pass sensitive information like password, OTP, email, etc. Because the password or other sensitive information will be visible in the browser's address bar when we use the HTTP "GET" method.
HTTP "POST" Method:
ØThis method is used to send the form-data as an HTTP "POST" method.
ØForm submissions with the HTTP "POST" method cannot be bookmarked.
ØThe HTTP "POST" method is more robust and secure than the HTTP "GET" method.
ØHTTP "POST" method does not have size limitations, we can send the more from-data compare than HTTP "GET" method.
Ø<input>: Define a input type "text", "checkbox", "radio", "file","hidden",“image”, "password", "url", “color”, “button”, "date", "time", “datetime-local”, "tel","email", "number", "search", "range", “reset”, “month”, “week”, “submit” etc.
Ø<textarea>: Defines a multi-line text input textbox.
Ø<button>: Defines a clickable or event handler button.
Ø<select>: Define a drop-down list with more selection option.
Ø<option>: Define the available selection options in the list.
Ø<optgroup>: Define a group related selection options in a drop-down list.
Ø<fieldset>: Define a group related element in a form with an outer border line.
Ø<label>: Define "Label" or Heading Description in form.
Ø<output>: Define or Represents the result of a calculation in form.
Ø<datalist>: Define to a drop-down list of pre-defined options and an "autocomplete" feature on <input> elements.
Form Attributes:
| Attribute | Value | Description |
| character_set | Specifies the character encodings that are to be used for the form submission | |
| URL | Specifies where to send the form-data when a form is submitted | |
| on | Specifies whether a form should have autocomplete on or off | |
| application/x-www-form-urlencoded | Specifies how the form-data should be encoded when submitting it to the server (only for method="post") | |
| get | Specifies the HTTP method to use when sending form-data | |
| Text | Specifies the name of a form | |
| Novalidate | Specifies that the form should not be validated when submitted | |
| _blank | Specifies where to display the response that is received after submitting the form |
<input> type Attributes:
| Attribute | Value | Description |
| accept | content types | Specifies a comma-separated list of content types that the server accepts. |
| align | left | Deprecated − Defines the alignment of content |
| alt | Text | This specifies text to be used in case the browser/user agent can't render the input control. |
| autocomplete | on | Specifies for enabling or disabling of autocomplete in <input> element |
| autofocus | Autofocus | pecifies that <input> element should automatically get focus when the page loads |
| checked | Checked | If type = "radio" or type = "checkbox" it will already be selected when the page loads. |
| disabled | Disabled | Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
| form | form_id | Specifies one or more forms |
| formaction | URL | Specifies the URL of the file that will process the input control when the form is submitted |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the serve |
| formmethod | post | Defines the HTTP method for sending data to the action URL |
| formnovalidate | formnovalidate | Defines that form elements should not be validated when submitted |
| formtarget | _blank | Specifies the target where the response will be display that is received after submitting the form |
| height | Pixels | Specifies the height |
| list | datalist_id | Specifies the <datalist> element that contains pre-defined options for an <input> element |
| max | Autofocus | Specifies the maximum value. |
| maxlength | Number | Defines the maximum number of characters allowed in a text field |
| min | Number | Specifies the minimum value. |
| multiple | Multiple | Specifies that a user can enter multiple values |
| name | Text | Assigns a name to the input control. |
| pattern | Regexp | Specifies a regular expression that an <input> element's value is checked against |
| placeholder | Text | Specifies a short hint that describes the expected value. |
| readonly | Readonly | Sets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls. |
| required | Required | Specifies that an input field must be filled out before submitting the form |
| size | Number | Specifies the width of the control. If type = "text" or type = "password" this refers to the width in characters. Otherwise it's in pixels. |
| src | URL | Defines the URL of the image to display. Used only for type = "image". |
| step | Number | Specifies the legal number intervals for an input field |
| type | button | Specifies the type of control. |
| value | Text | Specifies the intial value for the control.If type = "checkbox" or type = "radio" this attribute is required. |
| width | Pixels | Specifies the width |
Example: Simple Form
<form>
<h2>Anemone User Registration From<h2>
Username:<br>
<input type="text" name="username">
<br>
Email id:<br>
<input type="email" name="email">
<br><br>
<input type="submit" value="Submit">
</form>
Output:
Example: Complex Form
<form name=registration”” action="student-registration.jsp" method="post">
<h3>My Anemone Student Registration Form</h3>
<fieldset>
<legend>Fill the details.</legend>
<label>Name: </label>
<input type="text" name="name" size="50" placeholder="Your Name *" required="required"/><br><br>
<label>Class: </label>
<select name="class">
<option> X </option>
<option> XI </option>
<option> XII </option>
</select><br><br>
<label>Date of Birth: </label>
<input type="text" name="dob" size="50" placeholder="Your Date of Birth in dd/mm/yyyy *" required="required"/><br><br>
<label>Gender: </label>
<input type="radio" name="gender" value="Male" checked><span>Male</span>
<input type="radio" name="gender" value="Female"><span>Female</span><br><br>
<label>Email: </label>
<input type="email" name="email" size="50" placeholder="Email *" required="required"/><br><br>
<label>Mobile: </label>
<input type="tel" name="mobile-number" size="50" maxlength="10" minlength="10" placeholder="Mobile Number *" required="required"/><br><br>
<label>Password: </label>
<input type="password" name="password" size="50" placeholder="Password *" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters i.e - Anemone@123" /><br><br>
<label>I accept the terms and conditions of My Anemone</label>
<input type="checkbox" name="tac" value=" Agreed" required><br><br>
<input type="reset" name="reset" value="Reset"/>
<input type="submit" name="register" value="Register"/>
</fieldset>
</form>
Output:
0 Comments