HTML Forms

What is Html Form?

HTML form allows user to enter data that is sent to a server for processing. User fill out forms using text-boxes,checkboxes, and radio buttons. Starting tag for form is <form>. Closing tag for form is </form>.

Example:- Login Form

<form> <label>Username :</label><input type="text" name="username" > <label>Password : </label><input type="password" name="password"> <input type="submit" Value="Login"> </from>

Output:-

Input Type Elements

Text Element

A simple text box that allows input of a single line of text.

Example:-

<label>Name :</label><input type="text" name="username" >

Output:-

Password Element

Text in which the characters typed in are invisible or replaced by symbols such as !. It is used for security purposes.

Example:-

<label>Password : </label><input type="text" name="password" >

Output:-

Email Element

A type of text that requires a partially validated email address. Data entered without @ sign not accepted.

Example:-

<label>Email: </label><input type="email" name="email" >

Output:-

Number Element

A type of text that requires a number. Character data not accepted.

Example:-

<label>Number: </label><input type="number" name="number" >

Output:-

Checkbox Element

Checkboxes allow you to select one or more option from a pre-defined set of options.

Example:-

<form> <input type="checkbox" name="medicine"><label> Panadol </label> <input type="checkbox" name="medicine"><label> Paracetamol</label> <input type="checkbox" name="medicine"><label> Calpol </label> </form>

Output:-

Radio Element

Radio element allow you to select one option from a pre-defined set of options.

Example:-

<form> <input type="radio" name="medicine"> <label>Panadol</label> <input type="radio" name="medicine"><label> Paracetamol</label> </form>

Output:-

File Element

File element control for uploading a file.

Example:-

<form> <label>Upload File</label> <input type="file" name="medicine"> </form>

Output:-

Reset Element

Reset element tells the browser to restore the values to their initial values.

<form><label>Username :</label><input type="text" name="username" > <label>Password : </label><input type="password" name="password"> <input type="reset" Value="Reset"> </from>

Output:-

Submit Element

Submit Element is a button that tells the browser to take action on the form (typically to send it to a server)

<form> <label>Username :</label><input type="text" name="username" > <label>Password : </label><input type="password" name="password"> <input type="submit" Value="Login"> </from>

Output:-

Button Element

Defines button.

<form> <label>Username :</label><input type="text" name="username" > <label>Password : </label><input type="password" name="password"> <input type="button" onclick="alert('You Login')" value="login"> </from>

Output:-

Color Element

Defines color to pick.

<form> <label>Please select color:</label><input type="color" name="selectcolor" > </from>

Output:-

Time Element

Defines time as input field.

<form> <label>Please enter event date and time</label> <input type="datetime-local" name="eventtime"> <input type="submit"> </from>

Output:-

Date Element

Defines Date as input field.

<form> <label>Please enter event date</label> <input type="date" name="eventdate"> <input type="submit"> </from>

Output:-