HTML Tutorials

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

The datalist 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.

<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

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

<form action="/php/dataList.php" method="post">
  <input list="languages" name="language">
  <datalist id="languages">
    <option value="HTML">
    <option value="C">
    <option value="C++">
    <option value="Java">
    <option value="Python">
  </datalist>
  <input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #data list

The output Element

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

<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<form action="/php/outputForm.php" method="post" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #element #form #output

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

<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</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> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #input #form

Input Type Button

The <button> element defines a clickable button:

Click Me!

<!DOCTYPE html>
<html>
<body>

<h2>Input Button</h2>

<button type="button" onclick="alert('GSSS KHOKHAR')">Click Me!</button>

</body>
</html>

Live Demo & Try it yourself!

#HTML #button #form

Input Type Color

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.

<!DOCTYPE html>
<html>
<body>

<h2>Show a Color Picker</h2>

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

<form action="/php/inputColor.php">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #color #form

Input Type Date

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.

<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

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

<form action="/php/inputDate.php" method="post">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #date

Date Field Restrictions

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

<!DOCTYPE html>
<html>
<body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

<form action="/php/inputDateRestriction.php" method="post">
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #date

Input Type Datetime-local

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.

<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>

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

<form action="/php/inputLocalDate.php" method="post">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #date #time

Input Type Email

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.

<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>

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

<form action="/php/inputEmail.php" method="post">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #Email #form

Input Type Image

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

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

<!DOCTYPE html>
<html>
<body>

<h2>Display an Image as the Submit button</h2>

<form action="/php/inputImage.php" method="post">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br><br>
  
  <input type="image" src="/images/img_submit.gif" alt="Submit" width="48" height="48">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #image #form

ਫਾਈਲ ਅਪਲੋਡ ਕੰਟਰੋਲ (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.

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>
<form action="/php/inputTypeFile.php" method="post" enctype="multipart/form-data">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #file

Input Type Hidden

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!

<!DOCTYPE html>
<html>
<body>

<h1>A Hidden Field (look in source code)</h1>

<form method="post" action="/php/inputHidden.php">
  <label for="name">Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="id" name="id" value="123">

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

<p><strong>Note:</strong> The hidden field is not shown to the user, but the data is sent when the form is submitted.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #hidden

Input Type Month

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.

<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>

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

<form action="/php/inputMonth.php" method="post">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #month

Input Type Number

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:

<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>

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

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<form action="/php/inputNumber.php" method="post">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #number #form

Input Type Range

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:

<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type "range" can be displayed as a slider control.</p>

<form action="/php/inputRangeField.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #range

Input Type Search

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

<!DOCTYPE html>
<html>
<body>

<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

<form action="/php/inputSearch.php" method="get">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #search

Input Type Tel

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

<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/php/inputTel.php" method="get">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" value="01633-279150" placeholder="01633-279150" pattern="[0-9]{5}-[0-9]{6}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #tel

Input Type Time

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.

<!DOCTYPE html>
<html>
<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<form action="/php/inputTime.php" method="get">
  <label for="appt">Select a time:</label>
  <input type="time" id="tme" name="tme">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #time

Input Type Url

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.

<!DOCTYPE html>
<html>
<body>

<h1>Display a URL Input Field</h1>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

<form action="/php/inputURL.php" method="get">
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Live Demo & Try it yourself!

#HTML #form #url

Input Type Week

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.

<!DOCTYPE html>
<html>
<body>

<h1>Display a Week Input Control</h1>

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

<p>If the browser supports it, a date picker pops up when entering the input field.</p>

<form action="/php/inputWeek.php" method="get">
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11.</p>

</body>
</html>

Live Demo & Try it yourself!