وصف الدرس
ال Code الموجود في الدرس
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Book Store</title>
<meta name="description" content="This Is Our Book Store" />
</head>
<body>
<div>
<h1>Book Store</h1>
<p>This Is My Book Store, Welcome</p>
</div>
<form action="" method="GET" novalidate target="_blank">
<input type="hidden" value="Osama" />
<div>
<label>Username</label>
<input type="text" required placeholder="Username" name="user" value="Osama" readonly />
</div>
<br />
<div>
<label>Subject</label>
<input type="text" name="subject" autofocus />
</div>
<br />
<div>
<label>Password</label>
<input
type="password"
required
placeholder="Write A Complex Password"
name="pass"
minlength="10"
maxlength="20"
/>
</div>
<br />
<div>
<label>Email</label>
<input type="email" required placeholder="Write A Valid Email" value="o@nn.sa" name="mail" disabled />
</div>
<br />
<div>
<label>Color</label>
<input type="color" name="Color" />
</div>
<br />
<div>
<label>Range</label>
<input type="range" name="range" min="0" max="100" step="20" value="80" />
</div>
<br />
<div>
<label for="num">Number</label>
<input id="num" type="number" name="number" min="10" max="100" step="10" />
</div>
<hr />
<div>
<input id="win" type="radio" name="os" value="Windows" checked />
<label for="win">Windows</label>
</div>
<div>
<input id="lin" type="radio" name="os" value="Linux" />
<label for="lin">Linux</label>
</div>
<div>
<input id="mac" type="radio" name="os" value="Mac" />
<label for="mac">Mac</label>
</div>
<hr />
<div>
<input id="win1" type="checkbox" name="os" value="Windows" checked />
<label for="win1">Windows</label>
</div>
<div>
<input id="lin1" type="checkbox" name="os" value="Linux" />
<label for="lin1">Linux</label>
</div>
<div>
<input id="mac1" type="checkbox" name="os" value="Mac" />
<label for="mac1">Mac</label>
</div>
<br />
<label for="book">Choose Book:</label>
<select name="book" id="book">
<optgroup label="Romantic Books">
<option value="1">Book 1</option>
<option value="2">Book 2</option>
<option value="3">Book 3</option>
</optgroup>
<optgroup label="Police Books">
<option value="4" selected>Book 4</option>
<option value="5">Book 5</option>
<option value="6">Book 6</option>
</optgroup>
</select>
<hr />
<textarea name="subject" cols="40" rows="10" placeholder="Test Text"></textarea>
<hr />
<div>
<label>Upload</label>
<input type="file" />
</div>
<hr />
<div>
<label>Search</label>
<input type="search" />
</div>
<hr />
<div>
<label>Url</label>
<input type="url" />
</div>
<hr />
<div>
<label>Date</label>
<input type="date" />
</div>
<hr />
<div>
<label>Month</label>
<input type="month" />
</div>
<hr />
<div>
<label>Time</label>
<input type="time" />
</div>
<input list="programming" name="prog">
<datalist id="programming">
<option value="Python">
<option value="PHP">
<option value="C#">
<option value="C">
<option value="C++">
<option value="Scala">
</datalist>
<hr />
<input type="reset" value="Reset" />
<input type="submit" value="Save" />
</form>
</body>
</html>