You will learn how to automatically capitalize the first letter of each word in an HTML textbox field by following this guide. This is especially useful for form fields like names and titles that need to be formatted properly as nouns. Using HTML and CSS together, we can create an interactive form element that guarantees text formatting consistency as users type.
Please use the comment area to ask any questions you may have regarding the tutorial. Additionally, please read the instruction and attempt to grasp how it will work if you are unfamiliar with how to make the initial letter of each word capitalized automatically in an HTML textbox field.
Program to make the first letter of each word capitalized automatically in a textbox field in HTML
Initially, declare the document type and language of HTML by using the following code snippet:
<!DOCTYPE html> <html lang="en">
<html lang=”en”>. This tag opens the HTML document and indicates the language of the content by setting the language attribute to “en” (English).
Heading Snippet
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<title>Code Speedy: Capitalize Text</title>
<style>
.capitalize {
text-transform: capitalize;
}
</style>
</head>
This ‘<head>‘ tag contains the document title and performs various important actions like linking to scripts, stylesheets, etc. and initializing the character set using the ‘<meta charset=”UTF-8″>’ tag.
With the ‘<title>‘ tag, we can set the title for our project, and with the ‘</title>‘ tag, we close the title. In our project, I used ‘Code Speedy: Capitalize Text’ as the title.
For styling, we use the ‘<style>‘ tag and to end the styling section, we use the ‘</style>‘ tag. And we close the head section using the ‘</head>’ tag.
In the style tag, I used the class name for the input tag to add the CSS to the input.
With text-transform functionality, HTML makes changes to the input text automatically.
By setting text-transform to capitalize, we can achieve the capitalization of the first letter in each word.
Body Snippet
<body> <label for="inputText">Enter your text:</label> <input type="text" id="inputText" class="capitalize"> </body>
In the body, we are creating a label called ‘Enter your text’ and following it will make a textbox to show the output, as shown in Figure 1.
fig(1)
and if anyone wants to try the website, you can refer to the link
Output:
For the given input, ‘hi, this is Mohan from Codespeedy’. This output is ‘Hi, This Is The Mohan From Codespeedy’.
For the output, you can refer to the video.