HTML Input Type Image

HTML Input Type | Lesson 34 HTML Tutorial

Mofreh
September 20, 2019
HTML / Programming
0 Comments

In this lesson you will learn the html form input type and the attribute they have. Some of HTML form input type:
password, text, submit, reset, radio, checkbox….

Video explaining For The Same Content:

HTML Input Type Video

Input Type Text

<input type="text"> defines a one-line text input field:

Example:

 <form>
 Full Name:<br>
  <input type="text" name="Fullname"><br>
  Company Name:<br>
  <input type="text" name="CName">
</form>

Result:

Input Type Password

<input type="password"> defines a password field which prints the input character like dots in case to make it secure.

Example:

<form>
 Password:<br>
  <input type="password" name="Password"><br>

</form>

Result:

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-action. Form-action is typically a server page with a script for processing input data like php or javascript scripts. We could define the action attribute inside the form tag.

Example:

 <form action"/page-action.php">
 Full Name:<br>
  <input type="text" name="Fullname"><br>
  Company Name:<br>
  <input type="text" name="CName"><br/>
  <input type="submit">

</form>

Result:

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values means to empty the value you have added.

Example:

 <form action"/page-action.php">
 Full Name:<br>
  <input type="text" name="Fullname"><br>
  Company Name:<br>
  <input type="text" name="CName"><br/>
  <input type="submit">
  <input type="reset">

</form>

Result:

Input Type Radio

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices Not Multi Selection .

Example:

 <form>
  <input type="radio" name="lang" value="HTML" checked> HTML<br>
  <input type="radio" name="lang" value="CSS"> CSS<br>
  <input type="radio" name="lang" value="PHP"> PHP
</form>

Result:

Input Type Checkbox

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices, means Multi Selection.

Example:

<form>
  <input type="checkbox" name="lang" value="HTML" checked> HTML<br>
  <input type="checkbox" name="lang" value="CSS"> CSS<br>
  <input type="checkbox" name="lang" value="PHP"> PHP
</form>

Result:

Input Type Button

<input type="button"> defines a button, which is used for action purpose so when click user will get an action with action script like php and javascript.

Example:

 <input type="button" onclick="alert('Hello Programmer!')" value="Click to Try!">

Result:

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: http://www.w3schools.com