227 lines
8.0 KiB
HTML
227 lines
8.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="sk">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>formularoducitela</title>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h2>Formular priklad</h2>
|
||
|
|
|
||
|
|
<!-- method get alebo post -->
|
||
|
|
<form action="http://localhost/adlerka/action_page.php" method="get" name="prihlasenie">
|
||
|
|
<!-- method moze nadobudat dve hodnoty post alebo get,
|
||
|
|
default je get -->
|
||
|
|
<label for="namef">Meno:</label><br>
|
||
|
|
<input type="text" id="namef" name="fname" value="John"><br>
|
||
|
|
<label for="namel">Priezvisko:</label><br>
|
||
|
|
<input type="text" id="namel" name="lname" value="Doe"><br><br>
|
||
|
|
<input type="submit" value="Stlac">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="text"</h2>
|
||
|
|
<form>
|
||
|
|
<label for="ffname">First name:</label>
|
||
|
|
<input type="text" id="ffname" name="fnamee"><br>
|
||
|
|
<label for="llname">Last name:</label>
|
||
|
|
<input type="text" id="llname" name="lnamee">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="password"</h2>
|
||
|
|
<form method="get">
|
||
|
|
<label for="username">Username:</label><br>
|
||
|
|
<input type="text" id="username" name="username"><br>
|
||
|
|
<label for="pwd">Password:</label><br>
|
||
|
|
<input type="password" id="pwd" name="pwd">
|
||
|
|
<input type="submit" value="Stlac">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="submit" a input type="reset"</h2>
|
||
|
|
<form action="/action_page.php">
|
||
|
|
<label for="xfname">First name:</label><br>
|
||
|
|
<input type="text" id="xfname" name="xfname" value="John"><br>
|
||
|
|
<label for="xlname">Last name:</label><br>
|
||
|
|
<input type="text" id="xlname" name="xlname"><br><br>
|
||
|
|
<input type="submit" value="Odosli">
|
||
|
|
<input type="reset" value="test">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="radio"</h2>
|
||
|
|
<form>
|
||
|
|
<input type="radio" id="idmale" name="gender" value="male">
|
||
|
|
<label for="idmale">Male</label><br>
|
||
|
|
<input type="radio" id="idfemale" name="gender" value="female">
|
||
|
|
<label for="idfemale">Female</label><br>
|
||
|
|
<input type="radio" id="idother" name="gender" value="other">
|
||
|
|
<label for="idother">Other</label>
|
||
|
|
<input type="submit" value="Odosli">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="checkbox"</h2>
|
||
|
|
<form method="post" name="test">
|
||
|
|
<input type="checkbox" id="vehicle1" name="vehicle12" value="Bike" checked="">
|
||
|
|
<label for="vehicle1"> I have a bike</label><br>
|
||
|
|
<input type="checkbox" id="vehicle2" name="vehicle22" value="Car">
|
||
|
|
<label for="vehicle2"> I have a car</label><br>
|
||
|
|
<input type="checkbox" id="vehicle3" name="vehicle32" value="Boat" checked="">
|
||
|
|
<label for="vehicle3"> I have a boat</label>
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="color"</h2>
|
||
|
|
<form>
|
||
|
|
<label for="favcolor">Select your favorite color:</label>
|
||
|
|
<input type="color" id="favcolor" name="favcolor">
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="date"</h2>
|
||
|
|
<form action="">
|
||
|
|
<label for="datemax">Enter a date before 2000-01-01:</label>
|
||
|
|
<input type="date" id="datemax" name="datemax" max="2000-01-01"><br><br>
|
||
|
|
|
||
|
|
<label for="datemin">Enter a date after 2020-01-02:</label>
|
||
|
|
<input type="date" id="datemin" name="datemin" min="2020-01-02"><br><br>
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="email"</h2>
|
||
|
|
<form method="get">
|
||
|
|
<label for="email">Enter your email:</label>
|
||
|
|
<input type="email" id="email" name="email">
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="file"</h2>
|
||
|
|
<form method="post">
|
||
|
|
<label for="myfile">Select a file:</label>
|
||
|
|
<input type="file" id="myfile" name="myfile" multiple="">
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="number"</h2>
|
||
|
|
<form>
|
||
|
|
<label for="quantity">Quantity (between 0 and 500):</label>
|
||
|
|
<input type="number" id="quantity" name="quantity" min="0" max="500" step="3">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>atributy pre input (Input Restrictions)</h2>
|
||
|
|
<p>
|
||
|
|
checked - Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")<br>
|
||
|
|
disabled - Specifies that an input field should be disabled<br>
|
||
|
|
max - Specifies the maximum value for an input field<br>
|
||
|
|
maxlength - Specifies the maximum number of character for an input field<br>
|
||
|
|
min - Specifies the minimum value for an input field<br>
|
||
|
|
pattern - Specifies a regular expression to check the input value against<br>
|
||
|
|
readonly - Specifies that an input field is read only (cannot be changed)<br>
|
||
|
|
required - Specifies that an input field is required (must be filled out)<br>
|
||
|
|
size - Specifies the width (in characters) of an input field<br>
|
||
|
|
step - Specifies the legal number intervals for an input field<br>
|
||
|
|
value - Specifies the default value for an input field<br><br>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<form>
|
||
|
|
<label for="quantityy">Quantity:</label>
|
||
|
|
<input type="number" id="quantityy" name="quantity" min="0" max="100" step="10" value="30">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="range"</h2>
|
||
|
|
<form>
|
||
|
|
<label for="vol">Volume (between 0 and 50):</label>
|
||
|
|
<input type="range" id="vol" name="vol" min="0" max="50">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
|
||
|
|
10
|
||
|
|
<input type="range" id="a" name="a" value="50" min="10" max="100">
|
||
|
|
100 +
|
||
|
|
<input type="number" id="b" name="b" value="50">
|
||
|
|
=
|
||
|
|
<output name="x" for="a b"></output>
|
||
|
|
<br><br>
|
||
|
|
<input type="submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="tel" https://regexr.com/</h2>
|
||
|
|
<form>
|
||
|
|
<label for="phone">Enter your phone number:</label>
|
||
|
|
<input type="tel" id="phone" name="phone" placeholder="zadajte ci 123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
|
||
|
|
<input type="submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>input type="url"</h2>
|
||
|
|
<form>
|
||
|
|
<label for="homepage">Add your homepage:</label>
|
||
|
|
<input type="url" id="homepage" name="homepage" pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$">
|
||
|
|
<input type="submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h2>Datalist</h2>
|
||
|
|
<form action="">
|
||
|
|
<input list="browsers" name="browser" value="Chrome">
|
||
|
|
<datalist id="browsers">
|
||
|
|
<option value="Internet Explorer">
|
||
|
|
</option><option value="Firefox">
|
||
|
|
</option><option value="Chrome">
|
||
|
|
</option><option value="Opera">
|
||
|
|
</option><option value="Safari">
|
||
|
|
</option></datalist>
|
||
|
|
<input type="submit">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<form action="">
|
||
|
|
<label for="fname">First name:</label><br>
|
||
|
|
<input type="text" id="fname" name="fname"><br><br>
|
||
|
|
<select id="cars" name="cars" size="3" multiple="">
|
||
|
|
<option value="volvo">Volvo</option>
|
||
|
|
<option value="saab">Saab</option>
|
||
|
|
<option value="fiat">Fiat</option>
|
||
|
|
<option value="formula" selected="">Formula</option>
|
||
|
|
<option value="audi">Audi</option>
|
||
|
|
<option value="volvo">Volvo</option>
|
||
|
|
<option value="saab">Saab</option>
|
||
|
|
<option value="fiat">Fiat</option>
|
||
|
|
</select><br><br>
|
||
|
|
|
||
|
|
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea> <br><br>
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
<hr>
|
||
|
|
<button type="button" onclick="alert('Hello World!')">
|
||
|
|
Click Me!</button>
|
||
|
|
|
||
|
|
regularny vyraz
|
||
|
|
input type="text" pattern
|
||
|
|
datum narodenia 2020.12.31
|
||
|
|
|
||
|
|
rodne cislo 123456/8888
|
||
|
|
<form>
|
||
|
|
<label for="phone">Enter your phone number:</label>
|
||
|
|
<input type="text" id="phone" name="phone" placeholder="2020.12.31" pattern="[0-9]{4}.[0-9]{2}.[0-9]{2}">
|
||
|
|
<input type="submit">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|