welcome to tutorialfamily

html input

Input type are used for accept the data from user.

There are many input type in HTML form.

Input type used in <form> tag.

Text, radio, checkbox, submit, button ,number, password etc are input type.

input type “text”

input type syntax
<input type=”text”>. it is used for collect the name data from the user. it has default value up to 20 character. it is used single line data collect from the user.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type text demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		your name:<input type="text" name="yourname">
		your surname:<input type="text" name="surname">
		<input type="submit">
	</form>
</body>
</html>


input type “radio”

input type syntax
<input type=”radio”>. radio input type used for single data collect from the given list by user.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type radio demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		<input type="radio" name="car-list" value="Volvo" checked>Volvo
		<input type="radio" name="car-list" value="Mercedes"> Mercedes
		<input type="radio" name="car-list" value="Verna"> Verna
	</form>
</body>
</html>


input type “checkbox”

input type syntax
<input type=”checkbox”>. checkbox input type used for multidata collect from the given list by user.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type checkbox demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		<input type="checkbox" name="car-list-1" value="Volvo" checked>Volvo
		<input type="checkbox" name="car-list-2" value="Mercedes"> Mercedes
		<input type="checkbox" name="car-list-3" value="Verna"> Verna
	</form>
</body>
</html>


input type “password”

input type syntax
<input type=”password”>. password input type is define password field. it show bullet in input field during entering value in this field.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type password demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		your name:<input type="text" name="id">
		your password:<input type="password" name="pass">
		<input type="submit">
	</form>
</body>
</html>


input type “submit”

input type syntax
<input type=”submit”>. it is used for submit the data to server which is collect from the user.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type submit demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		your name:<input type="text" name="yourname">
		your surname:<input type="text" name="surname">
		<input type="submit">
	</form>
</body>
</html>


input type “number”

input type syntax
<input type=”number”>. it is used for number field. it sis numeric data field.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type number demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		your name:<input type="text" name="yourname">
		your age:<input type="number" name="age" min="0" max="100">
	</form>
</body>
</html>


input type “button”

input type syntax
<input type=”button”>. it defines a button.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type button demo
		</title>
		</head>
	
<body>
		<input type="button" onclick="alert(‘nice to meet you!’)" value="click it!">
</body>
</html>


input type “reset”

input type syntax
<input type=”reset”>. it is used for reset the form data. when we click on reset button, the form data reset with their default value.

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			input type reset demo
		</title>
		</head>
	
<body>
	<form action="form-action.php">
		your name:<input type="text" name="name" value="car">
		your brand:<input type="number" name="brand" value="volvo">
		<input type="submit">
		<input type="reset">
	</form>
</body>
</html>


Our Content