small coading to generate html form
Answers
The answer to the following question can be given as:
code:
<html>
<head>
<title>
Form
</title>
</head>
<body>
<h3>Login Form design</h3>
<form action="#" method="post">
NAME/ID:<br>
<input type="text" name="first_name" ><br>
PASSWORD:<br>
<input type="password" name="password">
</form>
<body>
</html>
output:
please show the picture
Explanation:
- The basic use of the form tag is used to move data into the database.
- In the form tag, we use two attributes that is method and action.
- In method attribute we use get or post. get is the default method. In this method, data is shown in the address bar and post method, it is a secure method in this data is not show in the address bar.
- Then we use the action in this method we pass the link where data is stored. In this tag, we use the input tag that is used to take input in its fields. In the last, we close the form tag.
Code:
<html>
<head>
<title>Register Your Self</title>
</head>
<body>
<h1>Register</h1>
<!-- -->
<form>
<!-- First Name required -->
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" placeholder="John" required="">
<!-- Last Name required -->
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" placeholder="Smith" required="">
<br>
<!-- radio button group -->
<div>
<label for="male"> Male</label>
<input id="male" type="radio" name="gender" value="male" >
<label for="female">Female</label>
<input id="female" type="radio" name="gender" value="female">
<label for="other">Other</label>
<input id="other" type="radio" name="gender" value="neutral" ><br>
</div>
<div>
<!-- Email required -->
<label for="email">Email:
<input type="email" name="email" placeholder="your email" required>
</label>
<!-- Password required between 5 and 10 characters -->
<label for="password">Password:
<input type="password" name="password" placeholder="your password" required
pattern=".{5,10}" title="Minimum 10 characters" >
</label>
</div>
<div>
<!-- Birthday with drop down for month, day, year -->
<label>
Birthday:
<select name="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="day">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="year">
<option>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
</label>
</div>
<!-- Agree to terms and conditions -->
<div>
<label for="agree">I agree to the terms and conditions</label>
<input id="agree" type="checkbox" name="Terms" >
</div>
<!-- Submit form -->
<div>
<input type="submit" >
</div>
</form>
</body>
</html>
