The correct place for easy learning....: Html Form Input

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.

<input type="image">:

The <input> type "image" is used to represent a submit button in the form of image.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label>UserName:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="login.png" width="100px">
</form>

</body>
</html>

<input type="file">:

The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

<label>Select file to upload:</label>

</form>

</body>

</html>

HTML5 newly added <input> types element.

<input type="email">:

The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

<label><b>Enter your Email-address</b></label>

<label><b>Enter multiple Email-addresses</b></label>

<p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace. </p>

</form>

</body>

</html>

<input type="number">:

The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict to enter a minimum and maximum value using min and max attribute.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="18" max="60">
<input type="submit">
<br><br><br>
<p><strong>Note:It will allow to enter number in range of 18-60. If you want to enter number other than range, it will show an error.</strong></p>
</form>
</body>
</html>

<input type="color">:

The <input> type "color" is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour interface on a browser.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
Pick your Favorite color: <br><br>
<input type="color" name="colour" value="#00000"> Select the colour
</form>
</body>
</html>

<input type="date">:

The <input> element of type "date" generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by date picker interface.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
</body>
</html>

<input type="url">:

The <input> element of type "url" creates an input filed which enables user to enter the URL.

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

<label>Enter your website URL: </label>

</form>

</body>

</html>

<input type="datetime-local">:

The <input> element of type "datetime-local" creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label>
Select the appointment Date: <br><br>
Select date & time: <input type="datetime-local" name="appointmentdate"> <br><br>
</label>
<input type="submit">
</form>
</body>
</html>

The correct place for easy learning....

Html Form Input

<input type="email">:

<input type="number">:

<input type="color">:

<input type="date">:

<input type="datetime-local">:

No comments:

Post a Comment