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="username">Username:</label>
           <input type="text" name="username" id="username">
        </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 write 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="Username">        
        </form>
    </body>
</html>
Example : How to make rounded corner text box of 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 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 html control tag empty/blank on 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>
		Country : <select required>
					<option value="">Choose One</option>
					<option value="India">India</option>
					<option value="USA">USA</option>
					<option value="UK">UK</option>
					<option value="Japan">Japan</option>			
		         </select> 
	       <input type="submit"><input type="reset">
	</form>        
    </body>
</html>
Example : How to make a text box self 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">        
    </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>                    
                </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>                    
                </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>

<!--------- 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" oninput="this.value=this.value.toLowerCase()"></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 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>

 405 total views,  1 views today

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.