Tuesday, November 8, 2022

Html Pattern attribute

    Pattern attribute 


Patterns attributes


1)  password attributes 

<input> element with type="password"

Password contains 6 or more characters


Password Attributes Example

<!DOCTYPE html>

 <html>

<body>

 <h1>password Tag</h1>

<form>

Password: <br>

<input type="password" name="pw" pattern="(6,}" title="Six or more characters"><br><br>

<input type="submit">

</form>

</body>

</html>


Password Attributed output


Password attributes

2) Password attributes 


<input>element with type="password"

  must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter.


Password attributes Example
 


<!DOCTYPE html> 
<html>
<body>

<p>A form with a password field that must contain 8 or <br>more characters that are of at least one number, <br>and one uppercase and lowercase letter:</p>
<form>
Password:

<input type="password" name="pw pattern="(?= "d)?= "[a-z])(?=" [A-Z]) (B)" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
 <br><br>
<input type="submit">
</form>
</body>
</html>


Password attributes output



Password Tag

3) Email  attributes

 <input> element with type="element"
 
 follow order: characters, number, letter, digit,alphabetical, upper- and lowercase


Email  attributes Example 

<! Doctype html>
 <html>
<!DOCTYPE html>
 <html>
<body>
<h1> Email Tag</h1><br>
<form>
Email: <br>
<input type="email" name="email"><br><br>
<input type="<input type="submit"> <br>
</form>
</body>
</html

Email  attributes output 



4) Homepage attributes 

<input> element type="url"


Email attributes Example 

<!Doctype html>

<html>

<Body>

<H1> Homepage attributes </h1>

<form>

 Homepage:

 <input type="url" name="website" pattern="https?://.+" title="Include http://">

<input type="submit">

</form>

</body>

</html>


Homepage attributes output

Homepage attributes use

5) Autofocus attribute

 

Autofocus attribute

Example :-

<!DOCTYPE html>

<html>

<body>

<h3>Autofocus Demo</h3> <form>

<form action="/action_page.php">

<label for="fname">First name:</label>

<input type="text" id="name" name="fname"autofocus><br><br>

<label for="lname">Last name:</label>
<input type="text" I'd="lname" neme="lname"><br><br> 
 <input type="submit">

</form>

</body>

</html>

Autofocus attribute 

 output :-

Autofocus attribute use

READ MORE

CSS box bottome property

Type of CSS Selector

CSS Introduction

html pattern attribute

Html form tag


No comments:

Post a Comment