HTML ਫਾਰਮ ਯੂਜ਼ਰ ਅਤੇ ਵੈੱਬਸਾਈਟ ਅੰਤਰਕਿਰਿਆ (Interactivity) ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਇਹ ਫਾਰਮ ਆਮ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਫਾਰਮਾਂ ਵਰਗੇ ਹੀ ਹੁੰਦੇ ਹਨ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਯੂਜ਼ਰ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ - ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਜਾਣਕਾਰੀ: ਨਾਮ, ਈਮੇਲ ਪਤਾ, ਕ੍ਰੈਡਿਟ ਕਾਰਡ, ਆਦਿ। ਇੱਕ ਫਾਰਮ ਯੂਜ਼ਰ ਤੋਂ ਇਨਪੁਟ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਫਿਰ ਇਸ ਇਨਪੁਟ ਨੂੰ ਵੈੱਬ-ਸਰਵਰ 'ਤੇ ਪੋਸਟ/ਸਬਮਿਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਵੈੱਬ-ਸਰਵਰ ਉਪਰ ਸਰਵਰ-ਸਾਈਡ ਪ੍ਰੋਗਰਾਮ (ASP ਜਾਂ PHP ਆਦਿ) ਫਾਰਮ ਵਿੱਚ ਭਰੇ ਡਾਟਾ ਉੱਪਰ ਕੰਮ ਕਰਦੇ ਹਨ ਅਤੇ ਉਸਨੂੰ ਡੇਟਾਬੇਸ ਵਿੱਚ ਸਟੋਰ ਕਰ ਦਿੰਦੇ ਹਨ।

If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

ਵੈਬ-ਫਾਰਮਰਜ਼ ਵਿਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਵੱਖ-ਵੱਖ ਕੰਟਰੋਲ ਦੇ ਨਾਮ 

•  ਟੈਕਸਟਬਾਕਸ ਕੰਟਰੋਲ 
•  ਚੈੱਕਬਾਕਸ ਕੰਟਰੋਲ 
•  ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ 
•  ਬਟਨ ਕੰਟਰੋਲ 
•  ਸਬਮਿੱਟ ਬਟਨ ਕੰਟਰੋਲ 

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ (Radio Button control): 

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

ਰੇਡੀਓ ਬਟਨ control ਦੀ ਵਰਤੋ ਉਹਨਾ ਸਥਿਤੀਆ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਅਸੀ ਯੂਜ਼ਰ ਦੁਆਰਾ ਇਨਪੁੱਟ ਕੀਤੇ ਗਏ ਮੁੱਲ ਨੂੰ ਇਕ ਬੂਲੀਅਨ ਮੁੱਲ ਵਜੋ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਜਾਂ ਅਸੀ ਕਈ ਆਪਸ਼ਨਾਂ ਵਿੱਚੋਂ ਸਿਰਫ ਇਕ ਇਨਪੁੱਟ ਦੀ ਹੀ ਉਮੀਦ  ਕਰਦੇ ਹਾਂ। ਸਾਧਾਰਣ ਸ਼ਬਦਾਂ ਵਿਚ ਅਸੀ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿ ਰੇਡੀਓ ਬਟਨਾਂ ਦੀ ਵਰਤੋ ਆਪਸ਼ਨਾ ਦੇ ਦਿੱਤੇ ਸਮੂਹ ਵਿਚੋ ਕਿਸੇ ਇੱਕ ਆਪਸ਼ਨ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ  ਹੈ। ਰੇਡੀਓ ਬਟਨਾ ਦੀ ਵਰਤੋ ਆਮ ਤੌਰ ਤੇ ਲਿੰਗ (Gender) ਸੰਬੰਧੀ ਆਪਸ਼ਨਾ (Male/Female), ਕਰਮਚਾਰੀ ਦੀ ਕਿਸਮ (ਨਿਯਮਤ ਜਾਂ ਅਸਥਾਈ) ਆਦਿ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀਂ type="radio" ਐਟਰੀਬਿਊਟ  ਦੇ ਨਾਲ <input> ਟੈਗ ਦੀ ਵਰਤੋ ਕਰਦੇ ਹਾਂ। ਰੇਡੀਓ ਬਟਨ CONTROL ਦੀ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣ ਇਸ ਪ੍ਰਕਾਰ ਹੈ:   
 Select Gender:<br> 
      <input type="radio" name="gender" value="Male">Male<br>
      <input type="radio" name="gender" value="female">female

    ਇਹ ਕੋਡ ਯੂਜ਼ਰ ਤੋ Gender ਦੇ ਮੁੱਲ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਦੋ ਰੇਡੀਓ ਬਟਨ ਬਣਾ ਰਿਹਾ ਹੈ। ਯੂਜ਼ਰ ਦਿੱਤੀਆ ਗਈਆ ਆਪਸ਼ਨਾ ਵਿੱਚੋ ਸਿਰਫ ਇਕ ਆਪਸ਼ਨ ਦੀ ਹੀ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ । ਸਰਵਰ ਸਾਈਡ ਸਕਿਰਪਟਿੰਗ ਜਿਵੇ ਕਿ JSP, ASP, PHP ਆਦਿ ਲਈ ਇਸ ਕੰਟਰੋਲ ਦੇ name ਐਟਰੀਬਿਊਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ ਸਿਲੈਕਟ ਕੀਤੇ ਗਏ ਰੇਡੀਓ ਬਟਨ ਦਾ ਮੁੱਲ ( valueਐਟਰੀਬਿਊਟ ਵਿਚ ਲਿਖ ਗਏ)  
 

ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਗਰੁੱਪ ਬਣਾਉਣ  ਲਈ ਸਾਰੇ ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਹੀ ਨਾਮ ਰੱਖਿਆ ਗਿਆ ਹੈ। 

D:/main/front.html
    radio button example         

select gender
○ Male
○ Female 
   ਯੂਜ਼ਰ ਦੁਆਰਾ ਸਿਲੈਕਸ਼ਨ ਕੀਤੇ ਜਾਣ ਤੋ ਬਾਅਦ 
 D./main/front.html 
radio  button example
select gender
○Male
○Female
 Radio Butto

ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ (ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ):
ਚੈਕਬਾਕਸਮੈਨ ਯੂਜ਼ਰ ਨੂੰ ਸੀਮਿਤ ਆਪਸ਼ਨ ਵਿੱਚ ਜੀਰੋ ਜਾ ਵਧੇਰੇ  ਆਪਸ਼ਨਾ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਦੋ  ਸੰਭਾਵਿਤ ਇੰਪੁੱਟ  ਪਹਿਲਾ  ਤੋ ਹੀ  ਪਤਾ ਹੋਣ  ਤਾਂ  ਇਹ ਕੰਟਰੋਲ  ਡਾਟਾ  ਨੂੰ  ਸਵੀਕਾਰ  ਕਰਨ  ਦਾ  ਇਕ ਬਹੁਤ ਹੀ  ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ  ਹੈ ਇਸ  ਕੰਟਰੋਲ  ਨੂੰ  ਬਣਾਉਣ  ਲਈ  ਅਸੀਂ  type="checkbox" ਐਟਰੀਬਿਊਟ ਦੇ  ਨਾਲ  <input> ਟੈਗ  ਦੀ  ਵਰਤੋ  ਕਰਦੇ ਹਾ ਯੂਜ਼ਰ ਦੀ ਅਪਸ਼ਨ  ਨੂੰ  ਸਵੀਕਾਰ  ਕਰਨ  ਲਈ  ਚੈੱਕਬੋਕ੍ਸ ਕੰਟਰੋਲ  ਦੀ  ਬੁਨਿਆਦੀ  ਉਦਹਾਰਣ  ਇਸ  ਪ੍ਰਕਾਰ  ਹੈ :
 

Select Your Subjects:<br>
<input type="radio"  name="cl" value="Chemistry">Chemistry<br>
<input type="radio" name="cl" value="Physics">Physics<br>
<input type="radio" name="cl" value="Math">Math<br>

ਇਹ  ਕੋਡ ਯੂਜ਼ਰ  ਤੋ ਵਿਸ਼ਿਆ ਦੀ  ਚੋਣ ਕਰਵਾਉਣ ਲਈ  ਤਿਨ  ਚੇਕਬੋਕ੍ਸ  ਬਣਾ  ਰਿਹਾ  ਹੈ  ਯੂਜ਼ਰਜ ਦਿਤੀਆਂ  ਗਈਆਂ  ਆਪਸ਼ਨਾ ਵਿਚੋ ਜੀਰੋ ਜਾਂ  ਵਧੇਰੇ  ਵਿਸ਼ਿਆਂ ਦੀ  ਚੋਣ  ਕਰ  ਸਕਦਾ ਹੈ  ਸਰਵਰ -ਸਾਈਡ ਸਕਰਿਪਟਿੰਗ  ਜਿਵੇਂ  ਕੇ  JSP , ASP , PHP ਆਦਿ  ਲਈ  ਇਸ  ਕੰਟਰੋਲ  ਦੇ  name ਐਟ੍ਰੀਬਿਊਟ  ਦੀ  ਲੋੜ  ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ  select ਕੀਤੇ  ਹੋਏ   ਚੇਕਬੋਕ੍ਸਾ ਦੇ ਮੁੱਲ  ਪ੍ਰਾਪਤ  ਕੀਤੇ  ਜਾ  ਸਕਣ  ਚੇਕਬੋਕ੍ਸਾ ਦਾ  ਇਕ  ਗਰੁੱਪ  ਬਣਾਉਣ  ਲਈ  ਸਾਰੇ  ਚੇਕਬੋਕ੍ਸ  ਦਾ  ਇਕੋ  ਹੀ  ਨਾਮ ਰੱਖਿਆ  

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data:

The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have one of the following values:

The default value is _self which means that the response will open in the current window.

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET. 

This example uses the POST method when submitting the form data:

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

The HTML <form> element can contain one or more of the following form elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

The <select> element defines a drop-down list:

Example

<label for="class">Choose your Class:</label>
  <select id="class" name="class">
    <option value="6th">6th</option>
    <option value="7th">7th</option>
    <option value="8th">8th</option>
    <option value="9th">9th</option>
    <option value="10th">10th</option>
    <option value="11th">11th</option>
    <option value="12th">12th</option>
  </select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example

<option value="10th" selected>10th Class</option>

Use the size attribute to specify the number of visible values:

Use the multiple attribute to allow the user to select more than one value:

The <textarea> element defines a multi-line input field (a text area):

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:

The <button> element defines a clickable button:

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

The <output> element represents the result of a calculation (like one performed by a script).

HTML Input Types

Here are the different input types you can use in HTML:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

ਇਹ ਵੀ ਇਕ ਸਿੰਗਲ ਲਾਈਨ ਟੈਕਸਟ ਇਨਪੁਟ ਕੰਟਰੋਲ ਹੈ।ਪਰ ਇਹ ਕੰਟਰੋਲ ਯੂਜ਼ਰ ਦੁਆਰਾ ਟੈਕਸਟ ਇਨਪੁਟ ਕਰਦੇ ਸਾਰੇ ਅੱਖਰਾਂ   ਉੱਪਰ ਮਾਰਕਿੰਗ ਕਰ ਦਿੰਦਾ ਹੈ (ਭਾਵ ਇਨਪੁਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਅੱਖਰ ਬਿੰਦੀਆ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ।ਇਸ ਲਈ ਇਸ ਕੰਟਰੋਲ ਦੀ ਵਰਤੋਂ ਵੈੱਬ ਪੇਜਾ ਵਿੱਚ ਪਾਸਵਰਡ ਆਦਿ ਸੁਰੱਖਿਅਤ ਜਾਣਕਾਰੀ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀ type="password"  ਐਟਰੀਬਿਊਟ ਦੇ ਨਾਲ < input> ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਪਾਸਵਰਡ ਕੰਟਰੋਲ ਦੀ ਇਕ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣ ਇਸ ਪ੍ਰਕਾਰ ਹੈ:
<Input Password:<input type="password">

ਇਹ ਕੋਡ ਪਾਸਵਰਡ ਜਾਣਕਾਰੀ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਲਈ ਇੱਕ ਟੈਕਸਟ ਫੀਲਡ ਬਣਾਉਂਦਾ ਹੈ। ਜਿਵੇਂ ਹੀ ਯੂਜਰ ਇਸ ਵਿਚ ਕੋਈ ਟੈਕਸਟ ਦਾਖਲ ਕਰੇਗਾ,ਇਹ ਇਨਪੁਟ ਅੱਖਰਾਂ ਨੂੰ ਮਾਸਕ ਕਰ ਦੇਵੇਗਾ।

ਇਹ ਕੰਟਰੋਲ ਵੀ name,size,maxlength ਅਤੇ value ਆਦਿ ਵਿਕਲਪਿਕ ਐਟਰੀਬਿਊਟਸ ਨੂੰ ਸਪੋਰਟ ਕਰਦਾ ਹੈ।

<input type="password"> defines a password field:

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ (Radio Button control): 

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

ਰੇਡੀਓ ਬਟਨ control ਦੀ ਵਰਤੋ ਉਹਨਾ ਸਥਿਤੀਆ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਅਸੀ ਯੂਜ਼ਰ ਦੁਆਰਾ ਇਨਪੁੱਟ ਕੀਤੇ ਗਏ ਮੁੱਲ ਨੂੰ ਇਕ ਬੂਲੀਅਨ ਮੁੱਲ ਵਜੋ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਜਾਂ ਅਸੀ ਕਈ ਆਪਸ਼ਨਾਂ ਵਿੱਚੋਂ ਸਿਰਫ ਇਕ ਇਨਪੁੱਟ ਦੀ ਹੀ ਉਮੀਦ  ਕਰਦੇ ਹਾਂ। ਸਾਧਾਰਣ ਸ਼ਬਦਾਂ ਵਿਚ ਅਸੀ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿ ਰੇਡੀਓ ਬਟਨਾਂ ਦੀ ਵਰਤੋ ਆਪਸ਼ਨਾ ਦੇ ਦਿੱਤੇ ਸਮੂਹ ਵਿਚੋ ਕਿਸੇ ਇੱਕ ਆਪਸ਼ਨ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ  ਹੈ। ਰੇਡੀਓ ਬਟਨਾ ਦੀ ਵਰਤੋ ਆਮ ਤੌਰ ਤੇ ਲਿੰਗ (Gender) ਸੰਬੰਧੀ ਆਪਸ਼ਨਾ (Male/Female), ਕਰਮਚਾਰੀ ਦੀ ਕਿਸਮ (ਨਿਯਮਤ ਜਾਂ ਅਸਥਾਈ) ਆਦਿ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀਂ type="radio" ਐਟਰੀਬਿਊਟ  ਦੇ ਨਾਲ <input> ਟੈਗ ਦੀ ਵਰਤੋ ਕਰਦੇ ਹਾਂ। ਰੇਡੀਓ ਬਟਨ CONTROL ਦੀ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣ ਇਸ ਪ੍ਰਕਾਰ ਹੈ:   
 Select Gender:<br> 
      <input type="radio" name="gender" value="Male">Male<br>
      <input type="radio" name="gender" value="female">female

    ਇਹ ਕੋਡ ਯੂਜ਼ਰ ਤੋ Gender ਦੇ ਮੁੱਲ ਦੀ ਸਿਲੈਕਸ਼ਨ ਕਰਵਾਉਣ ਲਈ ਦੋ ਰੇਡੀਓ ਬਟਨ ਬਣਾ ਰਿਹਾ ਹੈ। ਯੂਜ਼ਰ ਦਿੱਤੀਆ ਗਈਆ ਆਪਸ਼ਨਾ ਵਿੱਚੋ ਸਿਰਫ ਇਕ ਆਪਸ਼ਨ ਦੀ ਹੀ ਚੋਣ ਕਰ ਸਕਦਾ ਹੈ । ਸਰਵਰ ਸਾਈਡ ਸਕਿਰਪਟਿੰਗ ਜਿਵੇ ਕਿ JSP, ASP, PHP ਆਦਿ ਲਈ ਇਸ ਕੰਟਰੋਲ ਦੇ name ਐਟਰੀਬਿਊਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ ਸਿਲੈਕਟ ਕੀਤੇ ਗਏ ਰੇਡੀਓ ਬਟਨ ਦਾ ਮੁੱਲ ( valueਐਟਰੀਬਿਊਟ ਵਿਚ ਲਿਖ ਗਏ)  
 

ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਗਰੁੱਪ ਬਣਾਉਣ  ਲਈ ਸਾਰੇ ਰੇਡੀਓ ਬਟਨਾ ਦਾ ਇਕ ਹੀ ਨਾਮ ਰੱਖਿਆ ਗਿਆ ਹੈ। 

D:/main/front.html
    radio button example         

select gender
○ Male
○ Female 
   ਯੂਜ਼ਰ ਦੁਆਰਾ ਸਿਲੈਕਸ਼ਨ ਕੀਤੇ ਜਾਣ ਤੋ ਬਾਅਦ 
 D./main/front.html 
radio  button example
select gender
○Male
○Female
 Radio Butto

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ (ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ):
ਚੈਕਬਾਕਸਮੈਨ ਯੂਜ਼ਰ ਨੂੰ ਸੀਮਿਤ ਆਪਸ਼ਨ ਵਿੱਚ ਜੀਰੋ ਜਾ ਵਧੇਰੇ  ਆਪਸ਼ਨਾ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਦੋ  ਸੰਭਾਵਿਤ ਇੰਪੁੱਟ  ਪਹਿਲਾ  ਤੋ ਹੀ  ਪਤਾ ਹੋਣ  ਤਾਂ  ਇਹ ਕੰਟਰੋਲ  ਡਾਟਾ  ਨੂੰ  ਸਵੀਕਾਰ  ਕਰਨ  ਦਾ  ਇਕ ਬਹੁਤ ਹੀ  ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ  ਹੈ ਇਸ  ਕੰਟਰੋਲ  ਨੂੰ  ਬਣਾਉਣ  ਲਈ  ਅਸੀਂ  type="checkbox" ਐਟਰੀਬਿਊਟ ਦੇ  ਨਾਲ  <input> ਟੈਗ  ਦੀ  ਵਰਤੋ  ਕਰਦੇ ਹਾ ਯੂਜ਼ਰ ਦੀ ਅਪਸ਼ਨ  ਨੂੰ  ਸਵੀਕਾਰ  ਕਰਨ  ਲਈ  ਚੈੱਕਬੋਕ੍ਸ ਕੰਟਰੋਲ  ਦੀ  ਬੁਨਿਆਦੀ  ਉਦਹਾਰਣ  ਇਸ  ਪ੍ਰਕਾਰ  ਹੈ :
 

Select Your Subjects:<br>
<input type="radio"  name="cl" value="Chemistry">Chemistry<br>
<input type="radio" name="cl" value="Physics">Physics<br>
<input type="radio" name="cl" value="Math">Math<br>

ਇਹ  ਕੋਡ ਯੂਜ਼ਰ  ਤੋ ਵਿਸ਼ਿਆ ਦੀ  ਚੋਣ ਕਰਵਾਉਣ ਲਈ  ਤਿਨ  ਚੇਕਬੋਕ੍ਸ  ਬਣਾ  ਰਿਹਾ  ਹੈ  ਯੂਜ਼ਰਜ ਦਿਤੀਆਂ  ਗਈਆਂ  ਆਪਸ਼ਨਾ ਵਿਚੋ ਜੀਰੋ ਜਾਂ  ਵਧੇਰੇ  ਵਿਸ਼ਿਆਂ ਦੀ  ਚੋਣ  ਕਰ  ਸਕਦਾ ਹੈ  ਸਰਵਰ -ਸਾਈਡ ਸਕਰਿਪਟਿੰਗ  ਜਿਵੇਂ  ਕੇ  JSP , ASP , PHP ਆਦਿ  ਲਈ  ਇਸ  ਕੰਟਰੋਲ  ਦੇ  name ਐਟ੍ਰੀਬਿਊਟ  ਦੀ  ਲੋੜ  ਹੁੰਦੀ ਹੈ ਤਾਂ ਜੋ  select ਕੀਤੇ  ਹੋਏ   ਚੇਕਬੋਕ੍ਸਾ ਦੇ ਮੁੱਲ  ਪ੍ਰਾਪਤ  ਕੀਤੇ  ਜਾ  ਸਕਣ  ਚੇਕਬੋਕ੍ਸਾ ਦਾ  ਇਕ  ਗਰੁੱਪ  ਬਣਾਉਣ  ਲਈ  ਸਾਰੇ  ਚੇਕਬੋਕ੍ਸ  ਦਾ  ਇਕੋ  ਹੀ  ਨਾਮ ਰੱਖਿਆ  

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

The <button> element defines a clickable button:

Click Me!

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

You can also use the min and max attributes to add restrictions to dates:

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.

ਫਾਈਲ ਅਪਲੋਡ ਕੰਟਰੋਲ (FILE UPLOAD CONTROL) : 
ਜੇ ਅਸੀ ਕਿਸੇ ਯੂਜ਼ਰ ਨੂੰ ਉਸਦੇ ਕੰਪਿਊਟਰ ਤੋ ਸਾਡੀ ਵੈੱਬਸਾਈਟ ਤੇ ਇਕ  File Upload ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ ਸਾਨੂੰ ਫਾਈਲ ਅਪਲੋਡ ਕੰਟਰੋਲ ਦੀ ਵਰਤੋ  ਕਰਨ ਦੀ ਜਰੂਰਤ ਪਵੇਗੀ। ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਫਾਈਲ ਸਿਲੈਕਟ ਬਾਕਸ ਵੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀ   type="file" ਐਟਰੀਬਿਊਟ  ਦੇ ਨਾਲ <input> ਟੈਗ ਦੀ ਵਰਤੋ ਕਰਦੇ ਹਾਂ। ਫਾਈਲ ਅਪਲੋਡ ਕੰਟਰੋਲ  ਦੀ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣ  ਇਸ ਪ੍ਰਕਾਰ ਹੈ:

< input  type ="file" name="fileupload" accept="image/*">

ਸਰਵਰ ~ਸਾਈਡ ਸਕਿਰਪਟਿੰਗ ਭਾਸ਼ਾਵਾ ਜਿਵੇ ਕਿ  JSP, ASP, PHP ਆਦਿ ਲਈ Name  ਐਟਰੀਬਿਊਟ  ਦੀ ਜਰੂਰਤ ਪੈਂਦੀ  ਹੈ ਅਤੇ accept ਐਟਰੀਬਿਊਟ ਸਰਵਰ ਦੁਆਰਾ ਸਵੀਕਾਰ ਕੀਤੀਆ ਜਾਣ ਵਾਲੀਆ ਫਾਈਲਾ ਦੀਆ ਕਿਸਮਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਸਰਵਰ ਸਿਰਫ ਤਸਵੀਰ ਦੀ  ਕਿਸਮ ਵਾਲੀਆ ਫਾਈਲਾ (Image type files) ਨੂੰ ਹੀ ਸਵੀਕਾਰ ਕਰੇਗਾ:

 
D./main/front.html
file upload example   ______Browse.......
___     _____ 
choose to file upload 
Data (d.) ^main^      ^
search main   
organize•    New folder  
Document  ^
Download      
Music       bookmarks 
pictures         
video         computer  
win 10(c)       
data(d)     ^ education
                                      
file name   education^   ¤ 
Image file(avcr. avcr. avcr)^
open    cancel
ਯੂਜ਼ਰ ਦੁਆਰਾ ਫਾਈਲ ਸਿਲੈਕਟ ਕੀਤੇ ਜਾਣ ਤੋ ਬਾਅਦ 
 

D.main.form.html
file upload example    
D:/main/education.jpg      browse...........
ਫਾਈਲ  ਅਪਲੋਡ ਕੰਟਰੋਲ ਦੀ ਉਦਾਹਰਣ 

ਜਦੋ ਅਸੀ Browse.... ਬਟਨ ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹਾਂ ਤਾਂ ਫਾਈਲ ਅਪਲੋਡ ਕਰਨ ਲਈ ਇਕ ਡਾਇਲਾਗ ਬਾਕਸ   choose file to upload open ਹੋਵੇਗਾ। ਫਾਈਲ ਸਿਲੈਕਟ  ਕਰਨ ਤੋ ਬਾਅਦ ਇਸ ਡਾਇਲਾਗ ਬਾਕਸ (box)   ਦੇ  ਓਪਨ button ਤੇ ਕਲਿੱਕ ਕਰੋ। ਸਿਲੈਕਟ ਕੀਤੀ ਗਈ ਫਾਈਲ ਦਾ ਨਾਂ ਐਬਲੋਲਿਊਟ ਪਾਥ ਸਮੇਤ Browse... ਬਟਨ ਦੇ ਨਾਲ  ਲੱਗਦੇ ਰੀਡ ਓਨਲੀ text box   ਵਿਚ ਦਿਖਾਈ ਦੇਵੇਗਾ, 

FILE UPLOAD CONTROL
 

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

The <input type="tel"> is used for input fields that should contain a telephone number.

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

The input value attribute specifies an initial value for an input field:

The input value attribute specifies an initial value for an input field:

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.

The multiple attribute works with the following input types: email, and file.

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

The input form attribute specifies the form the <input> element belongs to.

The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.

Note: This attribute overrides the action attribute of the <form> element.

The formaction attribute works with the following input types: submit and image.

The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").

Note: This attribute overrides the enctype attribute of the <form> element.

The formenctype attribute works with the following input types: submit and image.

The input formmethod attribute defines the HTTP method for sending form-data to the action URL.

Note: This attribute overrides the method attribute of the <form> element.

The formmethod attribute works with the following input types: submit and image.

The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").

Notes on the "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 want 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 "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

Notes on the "post" method:

• This method sends the form-data as an HTTP post transaction
• Form submissions with the "post" method cannot be bookmarked
• The "post" method is more robust and secure than "get", and "post" does not have size limitations

The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the <form> element.

The formtarget attribute works with the following input types: submit and image.

The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.

Note: This attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute works with the following input types: submit.