Down below discussed all the types of input fields and things that are used in an HTML form
To watch in urdu how to make this click on the link given below
Part 1 of all types of input field in a form html5
Part 2 of all types of input field in a form
<!doctype html>
<html>
<title>Html Form</title>
<style>
*{margin:0px; padding:0px; }
#main{ width:280px; margin:10px auto;}
.inputfield{width:280px; height:45px;border:1px solid #C4C2C2;border-radius:5px;font-size:20px;
padding:0px 10px; }
</style>
<body>
<div id="main">
<form method="post" action="" name="" style="">
Name:<br>
<input type="text" class="inputfield" placeholder="Insert text"
style=""><br><br>
Mobile:<br>
<input type="tel" class="inputfield" placeholder="cell no" /><br><br>
<label>Email</label><br>
<input type="email" class="inputfield" placeholder="email" /><br><br>
<label> Url </label><br>
<input type="url" class="inputfield" placeholder="url" /><br><br>
<label>Password</label></br>
<input type="password" class="inputfield" placeholder="password" /><br><br>
<label> date</label><br>
<input type="date" class="inputfield" placeholder="date" /><br><br>
<label> Gender </label><br>
Male <input type="radio" name="sex" />
Female <input type="radio" name="sex" checked/><br><br>
<select name="selection" class="inputfield">
<option value="option1" >Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected>Option 3</option>
<option value="option4">Option 4</option>
</select><br><br>
checkbox 1<input type="checkbox" name="checkboxes" value="checkbox1" />
checkbox 2<input type="checkbox" name="checkboxes" value="checkbox2" />
checkbox 3<input type="checkbox" name="checkboxes" value="checkbox3" />
checkbox 4<input type="checkbox" name="checkboxes" value="checkbox4" />
<br><br>
List:<br>
<input list="list" class="inputfield" name="list">
<datalist id="list">
<option value="option1">
<option value="option2">
<option value="option3">
<option value="option4">
</datalist>
<br><br>
Number:<br>
<input type="number" class="inputfield" max="7" min="-5" step="2"/><br><br>
Range:<br>
<input type="range" class="inputfield" max="" step="" value="30" min=""/><br><br>
Color:<br>
<input type="color" class="inputfield" value="#efefef" /><br><br>
Textarea:<br>
<textarea class="inputfield" placeholder="textarea" name="textarea"></textarea><br><br>
<input type="submit" name="submit" value="Submit" style="width:70px;height:50px;"/>
<input type="reset" value="Reset" style="width:70px;height:50px;" />
<pre>
</pre>
</form>
</div>
</body>
</html>
<html>
<title>Html Form</title>
<style>
*{margin:0px; padding:0px; }
#main{ width:280px; margin:10px auto;}
.inputfield{width:280px; height:45px;border:1px solid #C4C2C2;border-radius:5px;font-size:20px;
padding:0px 10px; }
</style>
<body>
<div id="main">
<form method="post" action="" name="" style="">
Name:<br>
<input type="text" class="inputfield" placeholder="Insert text"
style=""><br><br>
Mobile:<br>
<input type="tel" class="inputfield" placeholder="cell no" /><br><br>
<label>Email</label><br>
<input type="email" class="inputfield" placeholder="email" /><br><br>
<label> Url </label><br>
<input type="url" class="inputfield" placeholder="url" /><br><br>
<label>Password</label></br>
<input type="password" class="inputfield" placeholder="password" /><br><br>
<label> date</label><br>
<input type="date" class="inputfield" placeholder="date" /><br><br>
<label> Gender </label><br>
Male <input type="radio" name="sex" />
Female <input type="radio" name="sex" checked/><br><br>
<select name="selection" class="inputfield">
<option value="option1" >Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected>Option 3</option>
<option value="option4">Option 4</option>
</select><br><br>
checkbox 1<input type="checkbox" name="checkboxes" value="checkbox1" />
checkbox 2<input type="checkbox" name="checkboxes" value="checkbox2" />
checkbox 3<input type="checkbox" name="checkboxes" value="checkbox3" />
checkbox 4<input type="checkbox" name="checkboxes" value="checkbox4" />
<br><br>
List:<br>
<input list="list" class="inputfield" name="list">
<datalist id="list">
<option value="option1">
<option value="option2">
<option value="option3">
<option value="option4">
</datalist>
<br><br>
Number:<br>
<input type="number" class="inputfield" max="7" min="-5" step="2"/><br><br>
Range:<br>
<input type="range" class="inputfield" max="" step="" value="30" min=""/><br><br>
Color:<br>
<input type="color" class="inputfield" value="#efefef" /><br><br>
Textarea:<br>
<textarea class="inputfield" placeholder="textarea" name="textarea"></textarea><br><br>
<input type="submit" name="submit" value="Submit" style="width:70px;height:50px;"/>
<input type="reset" value="Reset" style="width:70px;height:50px;" />
<pre>
</pre>
</form>
</div>
</body>
</html>
No comments:
Post a Comment