Scribd
Upload
8 views9 pages

Input Restrictions

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views9 pages

Input Restrictions

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

INPUT RESTRICTIONS

 Disabled:
CODE:

<!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>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
 Min and max:
CODE:

<!DOCTYPE html>
<html>
<body>

<h1>The input min and max attributes</h1>

<p>The min and max attributes specify the minimum and maximum values for an
input element.</p>

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

<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="quantity">Quantity (between 1 and 5):</label>


<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

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


</form>

</body>
</html>

OUTPUT:
 Pattern:
CODE:

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

</body>
</html>

OUTPUT:
 Read only:
CODE:

<!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>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
 Placeholder:
CODE:

<!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>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
 Required:
CODE:

<!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>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
 Autocomplete:
CODE:

<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<p>The autocomplete attribute specifies whether or not an input field should


have autocomplete enabled.</p>

<p>Fill in and submit the form, then reload the page to see how autocomplete
works.</p>

<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail
field!</p>

<form autocomplete="on">
<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>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
 Autofocus:
CODE:

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

</body>
</html>

OUTPUT:
 Multiple:
CODE:

<!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>
<label for="files">Select files:</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>

OUTPUT:

You might also like