We can set the lettercase of Textbox with an easy way by using CSS i.e. CapitalCase, UpperCase, Lowercase etc. CSS Stands for Cascading Style Sheet. It is very important part of any webpage. In HTML, we can easily set the Lettercase of textbox in any Style i.e. Capitalcase, Lowercase or Uppercase etc.
To set or change the lettercase, please follows the steps given below :
- Open a Text Editor i.e. notepad or wordpad etc., and type the following code.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body style="height: 136px">
<form id="letter" >
<p style="color: #FF0000">
<input id="txtcap" type="text" class="forcapital" /> * For Capital Case</p>
<p style="color: #FF0000">
<input id="txtup" type="text" class="forUpper" /> * For Upper Case</p>
<p style="color: #FF0000">
<input id="txtlow" type="text" class="forlower" /> * For Lower Case</p>
</form>
</body>
</html>
2. In above code we create three textboxes, "txtcap", "txtup" and "txtlow".
3. Now we type the following CSS in the form of a class for set the LetterStyle of these three textboxes.
<style type="text/css">
.forcapital
{
text-transform:capitalize;
}
.forUpper
{
text-transform:uppercase;
}
.forlower
{
text-transform:lowercase;
}
</style>
4. In above css we create three classes, In which first class is used for set the Letterstyle to Capital Case. Capital Case means First letter of any word is capital and other is lowercase and after a blank space when new word is start its first character is capital i.e.
Hello How Are You.
5. The Next class is used for set the LetterStyle to Uppercase. By using this Class when you type any text then it has been appeared in textbox in Uppercase Letter whether caps locks is on or OFF.
6. The Third and Last class is used for change the lettercase to Lowecase. By using this Class when you type any text then it has been appeared in textbox in Lowercase Letter whether caps locks is on or OFF.
The screen shortshot is as folows :
To illustrate this, we give the example as follows:
No comments:
Post a Comment
Note: only a member of this blog may post a comment.