Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Creating Forms using HTML



Creating HTML form using div tag:

<!DOCTYPE html>

<html>


<head>

<title>Registration Form</title>

</head>


<body>

<h1>Registration Form</h1>

<form>

<div>

<label for="name">Full name : </label>

<input type="text" name="name" placeholder="Enter your name" required>

<label for="Fname">Father's name : </label>

<input type="text" name="Fname" placeholder="Enter your Father's name" required>

</div>


<div>

<label>Gender  </label>

<input type="radio" name="male" value="choice-1">

<label for="male">Male</label>

<input type="radio" name="male" value="choice-2">

<label for="male">Female</label>

<!--we need to name both of them the same name so as to select one option at a time-->

</div>


<div>

<label for="email">Email : </label>

<input type="email" name="email" placeholder="abc@email.com" required>

<label for="pssword">Password : </label>

<input type="password" name="password" required>

</div>


<div>

<label for="bd">Birth Month : </label>

<select name="bd">

<option value="0" selected disabled>Month</option>

<option value="jan">January</option>

<option value="feb">February</option>

<option value="mar">March</option>

<option value="apr">April</option>

<option value="may">May</option>

<option value="jun">June</option>

<option value="jul">July</option>

<option value="aug">August</option>

<option value="sep">September</option>

<option value="oct">October</option>

<option value="nov">November</option>

<option value="dec">December</option>

</select>

</div>


<div>

<input type="checkbox" name="agree" required>

<label for = "agree" >I agree</label>

</div>


<div>

<button type="submit">Submit</button> 

</div>

</form>

</body>

</html>


Creating HTML form using table tag:

<!DOCTYPE html>



<html>



<head>

<title>Registration Form</title>

</head>



<body>

<h1>Registration Form</h1>


<Table>
<Form>
<tr>
<td>
<label for="name">Full name : </label>
</td>
<td>
<input type="text" name="name" placeholder="Enter your name" required>
</td>
</tr>

<tr>
<td>
<label for="Fname">Father's name : </label>
</td>
<td>
<input type="text" name="Fname" placeholder="Enter your Father's name" required>
</td>
</tr>



<tr>
<td>
<label>Gender  </label>
</td>
<td>
<input type="radio" name="male" value="choice-1">


<label for="male">Male</label>
</td>

<td>
<input type="radio" name="male" value="choice-2">

<label for="male">Female</label>
</td>
<!--we need to name both of them the same name so as to select one option at a time-->
</tr>


<tr>
<td>
<label for="email">Email : </label>
</td>
<td>
<input type="email" name="email" placeholder="abc@email.com" required>
</td>
</tr>

<tr>
<td>
<label for="pssword">Password : </label>
</td>
<td>
<input type="password" name="password" required>
</td>
</tr>

<tr>
<td>
<label for="bd">Birth Month : </label>
</td>
<td>
<select name="bd">

<option value="0" selected disabled>Month</option>

<option value="jan">January</option>

<option value="feb">February</option>

<option value="mar">March</option>

<option value="apr">April</option>

<option value="may">May</option>

<option value="jun">June</option>

<option value="jul">July</option>

<option value="aug">August</option>

<option value="sep">September</option>

<option value="oct">October</option>

<option value="nov">November</option>

<option value="dec">December</option>

</select>
</td>
</tr>




<tr>
<td>
<input type="checkbox" name="agree" required>
<label for = "agree" >I agree</label>
</td>
</tr>




<tr>
<td>
<button type="submit">Submit</button>
</td> 
</tr>
</Form>
</Table>



</body>

</html>

Post a Comment

0 Comments