Forms in HTML
Forms
Forms in HTML are a way to collect user data
Forms
<form>
<label for="animal">What is your favorite animal?</label>
<input type="text" id="animal" name="animal">
<button>Save</button>
</form>A Simple Form
<form> tag - marks the starting and end of a form.
action: "https://www.myserver.com/url",
method: "POST", "GET"
Input tag
button - A push button with no default behavior displaying the value of the value attribute, empty by default,
checkbox -
color -
date - A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day
datetime-local - A control for entering a date and time, with no time zone.
email - for email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
file - file as input. Use the accept attribute to define the types of files that the user can select.
hidden - A control that is not displayed but whose value is submitted to the server
image - A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.
month - A control for entering a month and year, with no time zone.
number - A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.
password - A single-line text field whose value is obscured.
radio - A radio button, allowing a single value to be selected out of multiple choices with the same name value.
range - A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.
reset - A button that resets the contents of the form to default values.
search - A single-line text field for entering search strings
submit - A button that submits the form
tel - A control for entering a telephone number. Displays a telephone keypad in devices.
text - A single-line text field
time - A control for entering a time value with no time zone.
url - A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices
week - A control for entering a date consisting of a week-year number and a week number with no time zone.
most widely used tag in the forms.
It can be used for different types of input based on type attribute.
Input tag and Types
<form>
<div>
<input type="text" id="name" name="name" placeholder="text"><br>
<input type="search" id="name" name="name" placeholder="search"><br>
<input type="number" id="name" name="name" placeholder="number"><br>
<input type="tel" id="name" name="name" placeholder="tel"><br>
<input type="email" id="name" name="name" placeholder="email"><br>
<input type="password" id="name" name="name" placeholder="password"><br>
<fieldset>
<legend>Files</legend>
<input type="file" id="photo" name="photo" placeholder="file">
<input type="image" id="photo" name="photo" placeholder="image" value="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.simplilearn.com%2Fimage-processing-article&psig=AOvVaw1iwkfmCUl4qeCMMipY1sTE&ust=1707387205387000&source=images&cd=vfe&opi=89978449&ved=0CBMQjRxqFwoTCMCYz5D_mIQDFQAAAAAdAAAAABAE">
</fieldset>
<fieldset>
<legend>Form Buttons</legend>
<input type="submit" name="photo" placeholder="submit"><br>
<input type="reset" name="photo" placeholder="reset"><br>
<input type="button" name="photo" value="Button Type Input" placeholder="reset"><br>
<button type="submit">Submit Button</button><br>
</fieldset>
<fieldset>
<legend>Time and Date</legend>
<label>time<input type="time" name="photo" placeholder="time"></label>
<label>date<input type="date" name="photo" placeholder="date"></label>
<label>datetime-local<input type="datetime-local" name="photo" placeholder="datetime-local"></label>
<label>week<input type="week" name="photo" placeholder="week"></label>
<label>month<input type="month" name="photo" placeholder="month"></label>
</fieldset>
<input type="range" name="photo" placeholder="range">
<label>
<input type="radio" value="blendan" name="machine"> Radio Button
</label>
<label>
<input type="checkbox" name="photo" placeholder="checkbox"> Checkbox
</label>
<br>
<input type="hidden" name="photo" placeholder="hidden">
<input type="url" name="photo" placeholder="url">
</div>
<button>Save</button>
</form>Select and Datalist Tag
<form action="https://codepen.io/web-dot-dev/pen/7225931596b7eeafc448ad55d9c980fd" target="-blank">
<div>
<label for="mountain">What is the highest mountain in Africa?</label>
<select id="mountain" name="mountain">
<option value="everest">Mount Everest</option>
<option value="kilimanjaro" selected>Mount Kilimanjaro</option>
<option value="meru">Mount Meru</option>
</select>
</div>
<br>
<br>
<div>
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
</div>
<button>Save</button>
</form>Textarea
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here…
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea.
</textarea>
<textarea name="textarea" rows="5" cols="30" readonly>
I am a read-only textarea.
</textarea>Helpful Attributes
- required, checked, disabled, readonly
- min - date, month, week, time, datetime-local, number, range,
- minlength - text, search, url, tel, email, password,
- max - date, month, week, time, datetime-local, number, range,
- maxlength - text, search, url, tel, email, password,
- pattern="[a-z]{2,20}"
- autofill with autocomplete="name", autocapitalize
- multiple, accept, capture - in file input,
- inputmode="numeric" for phone keypad