HTML Input → Typy

→ Prehľad všetkých input typov:

<input type="button">	<input type="checkbox">
<input type="color">	<input type="date">
<input type="datetime-local">	<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="url">	<input type="week">

Input Type Text

//index.html

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</form>

//output

Input Type Password

//index.html

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd">
</form>

//output

Input Type Submit

//index.html

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

//output

Input Type Reset

//index.html

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

//output

Input Type Radio

//index.html

<p>Vyber si obľúbený programovací jazyk:</p>
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

//output

Vyber si obľúbený programovací jazyk:

Input Type Checkbox

//index.html

<p>Vyber si obľúbený programovací jazyk:</p>
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1">HTML</label>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">CSS</label>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3">JS</label>
</form>

//output

Vyber si obľúbený programovací jazyk:

Input Type Button

//index.html

//output

Input Type Color

//index.html

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

//output

Input Type Date

//index.html

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

//output

Input Type Number

//index.html

<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>

//output