Form collects user input
<!-- This formwill 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 <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 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 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 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 provide the response, we add 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.