Jump to content

HTML Form ( HTML آشنایی با فرم ها در )


Adrian
 Share

Recommended Posts

  • Author

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .


Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.


HTML Form Syntax

 
  1. <form action="server url" method="get|post">  
  2.   //input controls e.g. textfield, textarea, radiobutton, button  
  3. </form>  

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

 

توضیحات نام تگ

یک فرم HTML

برای گرفتن داده های ورودی تعریف می کند 

<form>
یک کنترل ورودی را تعیین می کند  <input>
ایک کنترل ورودی چند خطی تعریف می کند  <textarea>
یک برچسب برای یک عنصر ورودی تعریف می کند  <label>
قسمت های مرتبط به هم را گروه بندی می کند  <fieldset>

یک عنوان برای عنصر <fieldset>

تعریف می کند 

<legend>
یک لیست کشویی تعریف می کند  <select>
گزینه های مرتبط را در یک لیست کشویی گروه بندی می کند  <optgroup>
یک گزینه در لیست کشویی تعریف می کند  <option>
یک دکمه قابل کلیک تعریف می کند  <button>

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

توضیحات نام تگ
لیستی از گزینه های پیش فرض برای کنترل ورودی مشخص می کند  <datalist>
یک فیلد تولیدکننده جفت کلید برای فرم تعریف می کند  <keygen>
نتیجه یک محاسبه مشخص می کند  <output>
Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc.

Syntax:

 
  1. <form>  
  2. //Form elements  
  3. </form>  

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input.

Example:

 
  1. <body>  
  2.   <form>  
  3.      Enter your name  <br>  
  4.     <input type="text" name="username">  
  5.   </form>  
  6. </body>  

Output:

image.png.eea32d09f1d0e227311fab7730499336.png

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

 
  1. <form>  
  2.     First Name: <input type="text" name="firstname"/> <br/>  
  3.     Last Name:  <input type="text" name="lastname"/> <br/>  
  4.  </form>  

Output:

image.png.ee32ae61097adcb86d0c1c6343104e87.png

Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.


HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Form in HTML</title>  
  5. </head>  
  6. <body>  
  7.   <form>  
  8.         Enter your address:<br>  
  9.       <textarea rows="2" cols="20"></textarea>  
  10.   </form>  
  11. </body>  
  12. </html>  

Output:

image.png.792c50cd963af2d09509f1a47bb4cbef.png

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens.

 
  1. <form>  
  2.     <label for="firstname">First Name: </label> <br/>  
  3.               <input type="text" id="firstname" name="firstname"/> <br/>  
  4.    <label for="lastname">Last Name: </label>  
  5.               <input type="text" id="lastname" name="lastname"/> <br/>  
  6.  </form>  

Output:

image.png.296efdc6454dfbe8f83756e97dcaaf47.png

HTML Password Field Control

The password is not visible to the user in password field control.

 
  1. <form>  
  2.     <label for="password">Password: </label>  
  3.               <input type="password" id="password" name="password"/> <br/>  
  4. </form>  

Output:

image.png.0ee31180ae76b491f014ad1c30fe5fd4.png

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field.

 
  1. <form>  
  2.     <label for="email">Email: </label>  
  3.               <input type="email" id="email" name="email"/> <br/>  
  4. </form>  

It will display in browser like below:

image.png.8404fa30386dfd0d9b9baec3ecaf6e2a.png

Note: If we will not enter the correct email, it will display error like:

image.png.b3e304e6905d86982d7b162c1d4466eb.png

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

 
  1. <form>  
  2.     <label for="gender">Gender: </label>  
  3.               <input type="radio" id="gender" name="gender" value="male"/>Male  
  4.               <input type="radio" id="gender" name="gender" value="female"/>Female <br/>  
  5. </form>  

image.png.5a037a1b00910693bf74974f61edd5cc.png


Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

 
  1. <form>  
  2. Hobby:<br>  
  3.               <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
  4.                  <label for="cricket">Cricket</label> <br>  
  5.               <input type="checkbox" id="football" name="football" value="football"/>  
  6.                  <label for="football">Football</label> <br>  
  7.               <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
  8.                  <label for="hockey">Hockey</label>  
  9. </form>  

Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.

Output:

image.png.28fb11083b6ba326d3982f477a681713.png

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.

Syntax:

 
  1. <input type="submit" value="submit">  

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

 
  1. <form>  
  2.     <label for="name">Enter name</label><br>  
  3.     <input type="text" id="name" name="name"><br>  
  4.     <label for="pass">Enter Password</label><br>  
  5.     <input type="Password" id="pass" name="pass"><br>  
  6.     <input type="submit" value="submit">  
  7. </form>  

Output:

image.png.845da4ca6e8d242bb4de46bf808b4f09.png

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements.

Example:

 
  1.  <form>  
  2.      <fieldset>  
  3.       <legend>User Information:</legend>  
  4.     <label for="name">Enter name</label><br>  
  5. <input type="text" id="name" name="name"><br>  
  6. <label for="pass">Enter Password</label><br>  
  7. <input type="Password" id="pass" name="pass"><br>  
  8. <input type="submit" value="submit">  
  9. </fieldset>  
  10. lt;/form>  

Output:

image.png.5a729ce365ff1c81554a85dcda8e5277.png

HTML Form Example

Following is the example for a simple form of registration.

 
  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <head>  
  4.   <title>Form in HTML</title>  
  5. </head>  
  6.  <body>  
  7.      <h2>Registration form</h2>  
  8.     <form>  
  9.      <fieldset>  
  10.         <legend>User personal information</legend>  
  11.         <label>Enter your full name</label><br>  
  12.         <input type="text" name="name"><br>  
  13.          <label>Enter your email</label><br>  
  14.          <input type="email" name="email"><br>  
  15.          <label>Enter your password</label><br>  
  16.          <input type="password" name="pass"><br>  
  17.          <label>confirm your password</label><br>  
  18.          <input type="password" name="pass"><br>  
  19.          <br><label>Enter your gender</label><br>  
  20.          <input type="radio" id="gender" name="gender" value="male"/>Male  <br>  
  21.          <input type="radio" id="gender" name="gender" value="female"/>Female <br/>    
  22.          <input type="radio" id="gender" name="gender" value="others"/>others <br/>   
  23.           <br>Enter your Address:<br>  
  24.          <textarea></textarea><br>  
  25.          <input type="submit" value="sign-up">  
  26.      </fieldset>  
  27.   </form>  
  28.  </body>  
  29. </html>  

Output:

image.png.b751e845bce71551a835d0dffeb7e1f8.png

HTML Form Example

Let's see a simple example of creating HTML form.

 
  1. <form action="#">  
  2. <table>  
  3. <tr>  
  4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>  
  5.     <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>  
  6. </tr>  
  7. <tr>  
  8.     <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>  
  9.     <td><input type="password" name="password" id="register_password" style="width:160px"/></td>  
  10. </tr>  
  11. <tr>  
  12.     <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>  
  13.     <td  
  14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>  
  15. </tr>  
  16. <tr>  
  17.     <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>  
  18.     <td>  
  19. <input type="radio" name="gender" id="register_gendermale" value="male"/>  
  20. <label for="register_gendermale">male</label>  
  21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>  
  22. <label for="register_genderfemale">female</label>  
  23.     </td>  
  24. </tr>  
  25. <tr>  
  26.     <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>  
  27.     <td><select name="country" id="register_country" style="width:160px">  
  28.     <option value="india">india</option>  
  29.     <option value="pakistan">pakistan</option>  
  30.     <option value="africa">africa</option>  
  31.     <option value="china">china</option>  
  32.     <option value="other">other</option>  
  33. </select>  
  34. </td>  
  35. </tr>  
  36. <tr>  
  37.     <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>  
  38. </div></td>  
  39. </tr>  
  40. </table>  
  41. </form>  
Link to comment
Share on other sites

  • Author

HTML Form Input Types ( آموزش انواع ورودی فرم  )

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

یک فیلد ورودی متنی تک خطی تعریف می کند text
یک فیلد ورودی رمز ورود تک خطی تعریف می کند password
یک دکمه ارسال برای ارسال داده های فرم به سرور تعریف می کند submit
یک دکمه شروع مجدد برای پاک کردن و بازنشانی مقادیر موجود در فیلدها تعریف می کند reset
یک دکمه رادیویی برای انتخاب یک گزینه تعریف می کند radio
کادرهای انتخاب را برای انتخاب چند گزینه های مختلف از فرم تعریف می کند checkbox
یک دکمه فشاری ساده تعریف می کند که می تواند برای انجام یک کار روی یک رویداد برنامه ریزی شود button
برای انتخاب فایل از حافظه دستگاه تعریف می شود file
یک دکمه ارسال گرافیکی تعریف می کند image
type=" " Description
text Defines a one-line text input field
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
image Defines a graphical submit button.

HTML5 added new types on <input> element. Following is the list of types of elements of HTML5

 

type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.

Following is the description about types of <input> element with examples.

1. <input type="text">:

<input> element of type "text" are used to define a single-line input text field.

Example:

 
  1. <form>  
  2.     <label>Enter first name</label><br>  
  3.     <input type="text" name="firstname"><br>  
  4.     <label>Enter last name</label><br>  
  5.     <input type="text" name="lastname"><br>  
  6.     <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
  7. </form>  

Output:

Input "text" type:

The "text"field defines a sinlge line input text field.

Enter first name

Enter last name

Note:The default maximum cahracter lenght is 20.


2. <input type="password">:

The <input> element of type "password" allow a user to enter the password securely in a webpage. The entered text in password filed converted into "*" or ".", so that it cannot be read by another user.

Example:

 
  1. <form>  
  2.     <label>Enter User name</label><br>  
  3.     <input type="text" name="firstname"><br>  
  4.     <label>Enter Password</label><br>  
  5.     <input type="Password" name="password"><br>  
  6.     <br><input type="submit" value="submit">  
  7. </form>  

 

Output:

Input "password" type:

The "password"field defines a sinlge line input password field to enter the password securely.

Enter User name

Enter Password


 

3. <input type="submit">:

The <input> element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.

Example:

 
  1. <form action="https://www.javatpoint.com/html-tutorial">  
  2.     <label>Enter User name</label><br>  
  3.     <input type="text" name="firstname"><br>  
  4.     <label>Enter Password</label><br>  
  5.     <input type="Password" name="password"><br>  
  6.     <br><input type="submit" value="submit">  
  7. </form>  

 

Output:

Input "submit" type:

Enter User name

Enter Password


 

After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about "action" attribute in later chapters


4. <input type="reset">:

The <input> type "reset" is also defined as a button but when the user performs a click event, it by default reset the all inputted values.

Example:

 
  1. <form>  
  2.     <label>User id: </label>  
  3.      <input type="text" name="user-id" value="user">  
  4.               <label>Password: </label>  
  5.      <input type="password" name="pass" value="pass"><br><br>   
  6.      <input type="submit" value="login">  
  7.       <input type="reset" value="Reset">  
  8. </form>  

 

Output:

Input "reset" type:

User id:  Password: 

 

Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.


5. <input type="radio">:

The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.

Example:

 
  1. <form>  
  2.   <p>Kindly Select your favorite color</p>  
  3.   <input type="radio" name="color" value="red"> Red <br>  
  4.   <input type="radio" name="color" value="blue"> blue <br>  
  5.   <input type="radio" name="color" value="green">green <br>  
  6.   <input type="radio" name="color" value="pink">pink <br>  
  7.   <input type="submit" value="submit">  
  8. </form>  

 

Output:

Input "radio" type

Kindly Select your favorite color

 Red
 blue
green
pink
 

6. <input type="checkbox">:

The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time.

Example:

 
  1. <form>   
  2.       <label>Enter your Name:</label>  
  3.       <input type="text" name="name">  
  4.       <p>Kindly Select your favourite sports</p>  
  5.       <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
  6.       <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
  7.       <input type="checkbox" name="sport3" value="football">Football<br>  
  8.       <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
  9.       <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
  10.       <input type="submit" value="submit">  
  11.   </form>  

 

Output:

Input "checkbox" type

 

Registration Form

Enter your Name: 

Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton

 

7. <input type="button">:

The <input> type "button" defines a simple push button, which can be programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:

 
  1. <form>  
  2.      <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
  3. </form>  

 

Output:

Input "button" type.

Click the button to see the result:

Note: In the above example we have used the "alert" of JS, which you will learn in our JS tutorial. It is used to show a pop window.


8. <input type="file">:

The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.

Example:

 
  1. <form>  
  2.      <label>Select file to upload:</label>  
  3.      <input type="file" name="newfile">  
  4.      <input type="submit" value="submit">  
  5. </form>  

 

Output:

Input "file" type.

We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option

Select file to upload:   

9. <input type="image">:

The <input> type "image" is used to represent a submit button in the form of image.

Example:

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Input "image" type.</h2>  
  5. <p>We can create an image as submit button</p>  
  6.   <form>  
  7.     <label>User id:</label><br>  
  8.      <input type="text" name="name"><br><br>  
  9.      <input type="image" alt="Submit" src="login.png"  width="100px">  
  10.   </form>  
  11.   
  12.  </body>  
  13. </html>  

HTML5 newly added <input> types element

1. <input type="color">:

The <input> type "color" is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour interface on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the default value is #000000 (black).

Example:

 
  1. <form>  
  2.     Pick your Favorite color: <br><br>  
  3.     <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>  
  4.     <input type="color" name="downclick" value="#f5f5dc"> Downclick  
  5. </form>  

 

Output:

Input "color" types:

Pick your Favorite color:

 Up-click

 Down-click

Note:The default value of "color" type is #000000 (black). It only supports color value in hexadecimal format.


2. <input type="date">:

The <input> element of type "date" generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by date picker interface.

Example:

 
  1. <form>  
  2.     Select Start and End Date: <br><br>  
  3.       <input type="date" name="Startdate"> Start date:<br><br>  
  4.       <input type="date" name="Enddate"> End date:<br><br>  
  5.      <input type="submit">  
  6. </form>  

 

Output:

Input "date" type

Select Start and End Date:

 Start date:

 End date:


 

3. <input type="datetime-local">:

The <input> element of type "datetime-local" creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.

Example:

 
  1. <form>  
  2.     <label>  
  3.       Select the meeting schedule: <br><br>  
  4.       Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>  
  5.     </label>  
  6.       <input type="submit">  
  7. </form>  

 

Output:

Input "datetime-local" type

Select the meeting schedule:

Select date & time: 

 

4. <input type="email">:

The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.

Example:

 
  1. <form>  
  2.          <label><b>Enter your Email-address</b></label>  
  3.         <input type="email" name="email" required>  
  4.         <input type="submit">  
  5.          <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
  6.          <label><b>Enter multiple Email-addresses</b></label>  
  7.          <input type="email" name="email"  multiple>  
  8.         <input type="submit">  
  9. </form>     

 

Output:

Input "email" type

Enter your Email-address  

Note:User can also enter multiple email addresses separating by comma or whitespace as following:

Enter multiple Email-addresses  

5. <input type="month">:

The <input> type "month" creates an input field which allows a user to easily enter month and year in the format of "MM, YYYY" where MM defines month value, and YYYY defines the year value. New

Example:

 
  1. <form>  
  2.     <label>Enter your Birth Month-year: </label>  
  3.     <input type="month" name="newMonth">  
  4.     <input type="submit">  
  5. </form>  

 

Output:

Input "month" type:

Enter your Birth Month-year:  

6. <input type="number">:

The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict to enter a minimum and maximum value using min and max attribute.

Example:

 
  1. <form>  
  2.     <label>Enter your age: </label>  
  3.     <input type="number" name="num" min="50" max="80">  
  4.      <input type="submit">  
  5. </form>  

 

Output:

Input "number" type

Enter your age:   

Note:It will allow to enter number in range of 50-80. If you want to enter number other than range, it will show an error.


7. <input type="url">:

The <input> element of type "url" creates an input filed which enables user to enter the URL.

Example:

 
  1. <form>  
  2.     <label>Enter your website URL: </label>  
  3.     <input type="url" name="website" placeholder="http://example.com"><br>  
  4.     <input type="submit" value="send data">  
  5. </form>  

 

Output:

Input "url" type

Enter your website URL: 

8. <input type="week">:

The <input> type week creates an input field which allows a user to select a week and year form the drop-down calendar without time zone.

Example:

 
  1. <form>  
  2.     <label><b>Select your best week of year:</b></label><br><br>  
  3.     <input type="week" name="bestweek">  
  4.     <input type="submit" value="Send data">  
  5.  </form>  

 

Output:

Input "week" type

Select your best week of year:

 

9. <input type="search">:

The <input> type "search" creates an input filed which allows a user to enter a search string. These are functionally symmetrical to the text input type, but may be styled differently.

Example:

 
  1. <form>  
  2.     <label>Search here:</label>  
  3.     <input type="search" name="q">  
  4.     <input type="submit" value="search">  
  5. </form>  

Test it Now

Output:

Input "search" type

Search here:   

10. <input type="tel">:

The <input> element of type ?tel? creates an input filed to enter the telephone number. The "tel" type does not have default validation such as email, because telephone number pattern can vary worldwide.

Example:

 
  1. <form>  
  2.       <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
  3.       <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
  4.       <input type="submit"><br><br>  
  5.    </form>   

 

Output:

Input "tel" type

Enter your Telephone Number(in format of xxx-xxx-xxxx):  
 

Note: Here we are using two attributes that are "pattern" and"required" which will allow user to enter the number in given format and it is required to enter the number in input field.

Link to comment
Share on other sites

  • Author

HTML form Attribute ( HTML آشنایی با صفات در فرم )

HTML <form> element attributes

In HTML there are various attributes available for <form> element which are given below:

HTML action attribute

The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page.

Example:

 
  1. <form action="action.html" method="post">  
  2. <label>User Name:</label><br>  
  3. <input type="text" name="name"><br><br>  
  4. <label>User Password</label><br>  
  5. <input type="password" name="pass"><br><br>  
  6.  <input type="submit">  
  7.    </form>  

 

Output:

Demo of action attribute of form element

User Name:


User Password


 

It will redirect to a new page "action.html" when you click on submit button


HTML method attribute

The method attribute defines the HTTP method which browser used to submit the form. The possible values of method attribute can be:

  • post: We can use the post value of method attribute when we want to process the sensitive data as it does not display the submitted data in URL.

Example:

 
  1. <form action="action.html" method="post">  
  • get: The get value of method attribute is default value while submitting the form. But this is not secure as it displays data in URL after submitting the form.

Example:

 
  1. <form action="action.html" method="get">  

When submitting the data, it will display the entered data in the form of:

 
  1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123  

HTML target attribute

The target attribute defines where to open the response after submitting the form. The following are the keywords used with the target attribute.

  • _self: If we use _self as an attribute value, then the response will display in current page only.

Example:

 
  1. <form action="action.html" method="get" target="_self">  
  • _blank: If we use _blank as an attribute it will load the response in a new page.

Example:

 
  1. <form action="action.html" method="get" target="_blank">  

HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically. It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of autocomplete attribute is "on".

Example:

 
  1. <form action="action.html" method="get" autocomplete="on">  

Example:

 
  1. <form action="action.html" method="get" autocomplete="off">  

Note: it can be used with <form> element and <input> element both.


HTML enctype attribute

The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server. The possible values of enctype can be:

  • application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is not included in the form. All characters are encoded before submitting the form.

Example:

 
  1. <form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >  
  • multipart/form-data: It does not encode any character. It is used when our form contains file-upload controls.

Example:

 
  1. <form action="action.html" method="post" enctype="multipart/form-data">  
  • text/plain (HTML5): In this encoding type only space are encoded into + symbol and no any other special character encoded.

Example:

 
  1. <form action="action.html" method="post" enctype="text/plain" >  

HTML novalidate attribute HTML5

The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this attribute in form then it does not perform any type of validation and submit the form.

Example:

 
  1. <form action = "action.html" method = "get" novalidate>  

Test it Now

Output:

Fill the form

Enter name:

Enter age:

Enter email:

Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.


HTML <input> element attribute

HTML name attribute

The HTML name attribute defines the name of an input element. The name and value attribute are included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP request includes both name-value pair and if name is not available it will not process that input field.

Example:

 
  1. <form action = "action.html" method = "get">  
  2.          Enter name:<br><input type="name" name="uname"><br>  
  3.          Enter age:<br><input type="number" name="age"><br>  
  4.          Enter email:<br><input type="email"><br>  
  5.          <input type="submit" value="Submit">  
  6.       </form>  

 

Output:

Fill the form

Enter name:

Enter age:

Enter email:

Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.

Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field


HTML value attribute

The HTML value attribute defines the initial value or default value of an input field.

Example:

 
  1. <form>  
  2.         <label>Enter your Name</label><br>  
  3.         <input type="text" name="uname" value="Enter Name"><br><br>  
  4.         <label>Enter your Email-address</label><br>  
  5.         <input type="text" name="uname" value="Enter email"><br><br>  
  6.           <label>Enter your password</label><br>  
  7.         <input type="password" name="pass" value=""><br><br>  
  8.         <input type="submit" value="login">  
  9.    </form>   

 

Output:

Fill the form

Enter your Name


Enter your Email-address


Enter your password


Note: In password input filed the value attribute will always unclear


HTML required attribute HTML5

HTML required is a Boolean attribute which specifies that user must fill that filed before submitting the form.

Example:

 
  1. <form>  
  2.         <label>Enter your Email-address</label><br>  
  3.         <input type="text" name="uname" required><br><br>  
  4.          <label>Enter your password</label><br>  
  5.         <input type="password" name="pass"><br><br>  
  6.         <input type="submit" value="login">  
  7.    </form>  

 

Output:

Fill the form

Enter your Email-address


Enter your password


If you will try to submit the form without completing email field then it will give an error pop up.


HTML autofocus attribute HTML5

The autofocus is a Boolean attribute which enables a field automatically focused when a webpage loads.

Example:

 
  1. <form>  
  2.         <label>Enter your Email-address</label><br>  
  3.         <input type="text" name="uname" autofocus><br><br>  
  4.          <label>Enter your password</label><br>  
  5.         <input type="password" name="pass"><br><br>  
  6.         <input type="submit" value="login">  
  7.    </form>      

HTML placeholder attribute HTML5

The placeholder attribute specifies a text within an input field which informs the user about the expected input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.

Example:

 
  1. <form>  
  2.         <label>Enter your name</label><br>  
  3.         <input type="text" name="uname" placeholder="Your name"><br><br>  
  4.             <label>Enter your Email address</label><br>  
  5.         <input type="email" name="email" placeholder="[email protected]"><br><br>  
  6.             <label>Enter your password</label><br>  
  7.         <input type="password" name="pass" placeholder="your password"><br><br>  
  8.         <input type="submit" value="login">  
  9.     </form>  

 

Output:

Registration form

Enter your name


Enter your Email address


Enter your password


 

HTML disabled attribute

The HTML disabled attribute when applied then it disable that input field. The disabled field does not allow the user to interact with that field.

The disabled input filed does not receive click events, and these input value will not be sent to the server when submitting the form.

Example:

 
  1. <input type="text" name="uname" disabled><br><br>  

Test it Now

Output:

Registration form

Enter User name


Enter your Email address


Enter your password


 

HTML size attribute

The size attribute controls the size of the input field in typed characters.

Example:

 
  1. <label>Account holder name</label><br>  
  2.         <input type="text" name="uname" size="40" required><br><br>  
  3.         <label>Account number</label><br>  
  4.         <input type="text" name="an" size="30" required><br><br>  
  5.         <label>CVV</label><br>  
  6.         <input type="text" name="cvv"  size="1" required><br><br>  

 

Output:

Registration form with disbaled attribute

Account holder name


Account number


CVV



HTML form attribute

HTML form attribute allows a user to specify an input filed outside the form but remains the part of the parent form.

Example:

 
  1. User email: <br><input type="email" name="email"  form="fcontrol"  required><br>  
  2.          <input type="submit" form="fcontrol">  

 

Output:

User Name:


User password:

 

The email field is outside the form but still it will remain part of the form

User email:

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share

×
×
  • Create New...