HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,773
2.	Tutorial + Programming	678,585
3.	Videos	218,834
4.	Results (`Annual + Re-appear`)	12,693
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,768
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,282
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,236
13.	Downloads (Syllabus)	948

Input Type Password

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

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>

<form method="get" action="/php/loginForm.php">
  <label for="username">UserName:</label><br>
  <input type="text" id="username" name="username" value="Bintu"><br><br>
  <label for="lname">Last name:</label><br>
  <input type="password" id="pwd" name="pwd" value="123456"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #password #text #form

Input Type Submit

<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:

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<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!

#HTML #form #submit

Input Type Reset

<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

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

<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #submit #reset

Input Type Radio

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

<!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 #form #radio button

Input Type Checkbox

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

<!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 #form #checkbox

The value Attribute

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

<!DOCTYPE html>
<html>
<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>
<form method="post" action="/php/actionPagePost.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bintu"><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> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #value #form

The readonly Attribute

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

<!DOCTYPE html>
<html>
<body>

<h1>The input readonly attribute</h1>

<p>The readonly attribute specifies that an input field should be read-only (cannot be changed):</p>

<form action="/php/actionPagePost.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bintu" readonly><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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #readonly

The disabled Attribute

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!

<!DOCTYPE html>
<html>
<body>

<h1>The input disabled attribute</h1>

<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>

<form action="/php/actionPagePost.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bintu" disabled><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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #disable

The size Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input size attribute</h1>

<p>The size attribute specifies the width (in characters) of an input field:</p>

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

</body>
</html>

Live Demo & Try it yourself!

#HTML #size #form

The maxlength Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input maxlength attribute</h1>

<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>

<form action="/php/actionPagePost.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="40"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" maxlength="4" size="10"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #maxlength

The multiple Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input multiple attributes</h1>

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

<form action="inputTypeFile.php" method="post" enctype="multipart/form-data">
  <label for="myfile">Select a file:</label>
  <input type="file" id="files" name="files" multiple><br><br>
  <input type="submit" value="Submit">
</form>
<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>
</body>
</html>

Live Demo & Try it yourself!

#HTML #form #multiple #files

The pattern Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input pattern attribute</h1>

<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>

<form action="/php/inputPattern.php" method="get">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #pattern

The placeholder Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input placeholder attribute</h1>

<p>The placeholder attribute specifies a short hint that describes the expected value of an input field.</p>

<form method="post" action="/php/actionPagePost.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" placeholder="First Name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #placeholder

The required Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>

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

<form method="post" action="/php/actionPagePost.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" placeholder="First Name" required><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" placeholder="Last Name" required><br><br>
  <input type="submit" value="Submit">
</form> 

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Safari prior version 10.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #required

The step Attribute

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.

<!DOCTYPE html>
<html>
<body>

<h1>The input step attribute</h1>

<p>The step attribute specifies the legal number intervals for an input element.</p>

<form action="/php/inputStep.php" method="get">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #step

The autofocus Attribute

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

<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>

<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>

<form method="post" action="/php/actionPagePost.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><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!