Form is used to collect user input.
For example, this form will send information to example.html as a POST request
<form action="/example.html" method="POST"></form>
<form> defines an HTML form for user input<input> defines an input control<textarea> defines a multiline input control (text area)<label> defines a label for an element<button> defines a clickable button<select> defines a drop-down list<option> defines an option in a drop-down list<input type="button" />
<input type="checkbox" />
<input type="color" />
<input type="date" />
<input type="datetime-local" />
<input type="email" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="month" />
<input type="number" />
<input type="password" />
<input type="radio" />
<input type="range" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="tel" />
<input type="text" />
<input type="time" />
<input type="url" />
<input type="week" />
To create text input, we use the <input> element.
<form action="/example.html" method="POST">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" placeholder="Enter your first name"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" placeholder="Enter your last name">
<input type="submit" value="Submit">
</form>
To create email input, we use the type “email”.
<form>
<label for="email" id="email-lable">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email"><br>
<input type="submit" value="Submit">
</form>
To make a submit button in a form, we use <input> with the type “submit”. If there isn’t a value attribute, the default text, Submit, shows up on the button.
<form>
<input type="submit" value="Send">
</form>
<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>
<form>
<label for="years"> Years of experience: </label>
<input id="years" name="years" type="number" step="1">
</form>
To create a slider, we use the range input.
<form>
<label for="volume"> Volume Control</label>
<input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>
<form>
<p>Choose your flavor:</p>
<input id="vanilla" name="topping" type="checkbox" value="vanilla">
<label for="vanilla">Vanilla</label>
<br>
<input id="chocolate" name="topping" type="checkbox" value="chocolate">
<label for="chocolate">Chocolate</label>
<br>
<input id="strawberry" name="topping" type="checkbox" value="strawberry">
<label for="strawberry">Strawberry</label>
</form>
<form>
<p>What is sum of 1 + 1?</p>
<input type="radio" id="two" name="answer" value="2">
<label for="two">2</label>
<br>
<input type="radio" id="eleven" name="answer" value="11">
<label for="eleven">11</label>
</form>
<form>
<label for="lunch">What's for lunch?</label>
<select id="fruits" name="fruits">
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</form>
<form>
<label for="lunch">What's your favorite fruit?</label>
<input type="text" list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</datalist>
</form>
<form>
<label for="comment">Comment: </label>
<br>
<textarea id="comment" name="comment" rows="5" cols="30" placeholder="Adding text">
</textarea>
</form>
To ensure users response, we add the required attribute.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The input min and max attributes specify the minimum and maximum values.