Table of Contents
hide
Input Tag (input type=”text”)
Example : How to create text box in html .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text">
</body>
</html>Example : How to naming a text box in html .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form>
<label for="unamelabel">Username:</label>
<input type="text" name="username1" id="username2">
</form>
</body>
</html>Example : How to add placeholder/shadow text message inside text box of html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" placeholder="Enter Student Name">
</body>
</html>
<!-- NB : Use of Placeholder : Use of Placeholder to Display the Information for User What to do with the Text Box.On typing the text in the text box,placeholder contentrs disappear. -->Example : How to shift character inside a text box with a little space leftward in an html page.
<html>
<head>
<title>ResetPage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<input type="text" style="text-indent:20px" placeholder="Enter Username">
</form>
</body>
</html>Example : How to make rounded corner of text box border in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" style="border-radius:10px">
</body>
</html>Example : How to set color/fore color/font-color of text in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" style="color: Red">
</body>
</html>Example : How to set background color of text box in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" style="background-color: Green">
</body>
</html>Example : How to set border color of a text box in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" style="border-color: Pink;">
</body>
</html>Example : How to make a text box read only/non-writable in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" readonly="">
</body>
</html>Example : How to stop an empty/blank or must fill html controls before submission of page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form method="post" action="#">
Student Name : <input type="text" required>
<input type="submit"><input type="reset">
</form>
</body>
</html>Example : How to make a text box self/auto focus on loading of the html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" autofocus="">
</body>
</html>
<!-- NB : Use of Autofocus : This is used to put cursor automatically in the used text box when the page is loaded . -->Example : How to make a text box autocomplete on typing few character in a text box in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
Student Name : <input type="text" autocomplete="on">
<!--Student Name : <input type="text" autocomplete="off">-->
</body>
</html>
<!-------------- Another Standard Format --------------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" autocomplete="on"></td>
<!-- OR --<td><input type="text" autocomplete="off"></td>-->
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!-- NB :
Use of Autocomplete : This feature displays the available suggestion list as a list of previous used/typed words in a text box automatically when we start writing few letters in the text box. -->Example : How to make a text box completely disabled for writing characters in it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" disabled></td>
<!--<td><input type="text" enabled></td>--> //To make it enabled.
</tr>
</table>
</fieldset>
</form>
</body>
</html>Example : How to make a text box to convert any textual characters into uppercase letters.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" style="text-transform: uppercase"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!--------- OR ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<style>
input.stu{text-transform: uppercase;}
</style>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" class="stu"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!--------- OR ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" onkeyup="this.value = this.value.toUpperCase();"></td>
<!--<td><input type="text" oninput="this.value = this.value.toUpperCase()"></td>-->
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!--------- OR ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<style>
input[type="text"]
{
text-transform : uppercase;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!-- NB : This code convert all text boxes value into uppercase letters. -->Example : How to make a text box to convert any textual characters into lowercase letters.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<style>
input.stu{text-transform: lowercase;}
</style>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" class="stu"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>Example : How to make the first letter of a sentence capitals(sentence case).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" style="text-transform: capitalize"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>Example : How to limit the length of characters in a text box.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="#">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" maxlength="10"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>Example : How to increase the size/width/length of a text box.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="">
<fieldset>
<legend>Sample Format of Simple HTML Page</legend>
<table>
<tr>
<td>Name of Student</td>
<td>:</td>
<td><input type="text" size="50px"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>Example : How to set icon/small image inside a text box.
<html>
<head>
<title>Codershelpline</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="text" style="background-image: url('eyeicon.png'); background-repeat:no-repeat; background-position:right" placeholder="Username">
<!--<input type="text" style="background-image: url('eyeicon.png'); background-repeat:no-repeat; background-position: 5px 3x" placeholder="Username">-->
</form>
</body>
</html>
0 Comments