HTML Tutorials

#	Content	Views
1.	Tutorial Tags	36,967
2.	Tutorial + Programming	1,061,086
3.	Videos	353,021
4.	Results (`Annual + Re-appear`)	44,785
5.	Quiz Chapters	37,075
6.	Quiz Questions	538,981
7.	Quiz Results	29,742
8.	Testimonials	7,581
9.	Projects	33,780
10.	e-Words	22,241
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,408
13.	Downloads (Syllabus)	2,635

Form Element

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:

Type	Description
<input type="text">	Displays a single-line text input field
<input type="radio">	Displays a radio button (for selecting one of many choices)
<input type="checkbox">	Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">	Displays a submit button (for submitting the form)
<input type="button">	Displays a clickable button

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

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

<!DOCTYPE html>
<html>
<body>

<h2>Text input fields</h2>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bintu" size="30"><br><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Chaudhary"><br><br>
</form> 

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

Live Demo & Try it yourself!

#HTML #element #input #form

The label Element

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.

<!DOCTYPE html>
<html>
<body>

<h2>Label Elements</h2>

<form>
  <label for="fname">First name:</label> 
  <label for="lname">Last name:</label>
</form> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #element #form #label

Radio Buttons

ਰੇਡੀਓ ਬਟਨ ਕੰਟਰੋਲ (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

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your Class:</p>

<form method="post" action="/php/radiobutton.php">
  <input type="radio" id="10" name="class" value="10th">
  <label for="html">10th Class</label><br>
  <input type="radio" id="11" name="class" value="11th">
  <label for="css">11th Class</label><br>
  <input type="radio" id="12" name="class" value="12th">
  <label for="javascript">12th Class</label>
  <BR><BR>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #element #form #radio button

Checkboxes

ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ (ਚੈਕਬਾਕਸ ਕੰਟਰੋਲ):
ਚੈਕਬਾਕਸਮੈਨ ਯੂਜ਼ਰ ਨੂੰ ਸੀਮਿਤ ਆਪਸ਼ਨ ਵਿੱਚ ਜੀਰੋ ਜਾ ਵਧੇਰੇ ਆਪਸ਼ਨਾ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਦੋ ਸੰਭਾਵਿਤ ਇੰਪੁੱਟ ਪਹਿਲਾ ਤੋ ਹੀ ਪਤਾ ਹੋਣ ਤਾਂ ਇਹ ਕੰਟਰੋਲ ਡਾਟਾ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਦਾ ਇਕ ਬਹੁਤ ਹੀ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਹੈ ਇਸ ਕੰਟਰੋਲ ਨੂੰ ਬਣਾਉਣ ਲਈ ਅਸੀਂ 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.

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/php/checkbox.php" method="POST">
  <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>

  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>

  <input type="submit" value="Submit">
</form> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #element #form #checkbox

The Submit Button

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.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form method="get" action="/php/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bintu"><br><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Chaudhary"><br><br>
  <input type="submit" value="Submit">
</form> 

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

</body>
</html>

Live Demo & Try it yourself!