JavaScript methods to create and manipulate a textbox
This tutorial will help you to understand how you can create a textbox element as well as how you can manipulate various attributes of the textbox using JavaScript.
Create a textbox using JavaScript
- First, you need to use the createElement(«input») method of the document object to create an element.
- Then, you need to set the type attribute of the element that you’ve created to «text» using the Element.setAttribute() method.
The code inside the tag below shows how you can create a textbox and append it to the body element:
The resulting HTML document will be as follows:
Now that you know how you can create a textbox using JavaScript, let’s learn how you can manipulate various attributes of the textbox element.
Adding id attribute to the textbox using JavaScript
First, you may want to add an id attribute to the element so that you can easily fetch the element and retrieve its value. You can easily add the attribute by using the same setAttribute() method.
The code below shows how you can add the id attribute with «username» as its value:
Next, you may want to add a tag to the textbox to make it clear to users what the textbox is there for. You can do so by using the same createElement() method but replace the parameter with «label» .
For example, you may want to create a textbox so that users can enter their username . Here’s how you can create a label for that:
The for attribute of the element must match the id attribute of the element so that the label will be bound to the right element. The label text will be read by the device for the user.
You also need to set the innerHTML property of the element. The text inside will be read by screen-reader devices.
- Append the label before the textbox with the same appendChild() method
- Grab the textbox element using document.getElementById() method, then use insertBefore() method to insert the label before the textbox.
For the first choice, you need to add the code for creating the label before the textbox:
Now you’re going to have the following output inside the tag:
As for the second choice, You need to call the insertBefore() method on the element’s parent, which is the element in this example.
- The newElement to be inserted
- And the existingElement where the newElement will be prepended.
The syntax for the method is as follows:
Let’s see how it works step by step. First, create the textbox element and append it to the HTML body:
Then, create the label element:
Finally, how you can grab the textbox element and call body.insertBefore() method to insert the element above the textbox:
The full code will be as shown below:
Now you’ve learned how to insert a label for the textbox element. Manipulate textbox placeholder attribute using JavaScript
You may also want to set the placeholder attribute for the textbox to give your users a hint about the expected value for the textbox.
Since your textbox already has an id attribute, you can use the document.getElementById() method to fetch the element and use the setAttribute() method to set the placeholder:
And with that, your textbox will have the placeholder attribute set.
Manipulate the value attribute of the textbox using JavaScript
Finally, the input element also has the value property which you can use the get or set the value stored inside the textbox.
For example, type any text you want into the textbox and then fetch its value:
You can also set the value as follows:
And that’s how you can get or set the value property of a textbox 😉
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.
About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Search
Type the keyword below and hit enter
Tags
Click to see all tutorials tagged with:
Document: createElement() method
In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized.
Syntax
createElement(tagName) createElement(tagName, options)
Parameters
A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don’t use qualified names (like «html:a») with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement(«null») .
An object with the following properties:
The tag name of a custom element previously defined via customElements.define() . See Web component example for more details.
Return value
Note: A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.
Examples
Basic example
This creates a new and inserts it before the element with the ID » div1 «.
HTML
doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Working with elementstitle> head> body> div id="div1">The text above has been created dynamically.div> body> html>
JavaScript
.body.onload = addElement; function addElement() // create a new div element const newDiv = document.createElement("div"); // and give it some content const newContent = document.createTextNode("Hi there and greetings!"); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); >
Result
Web component example
The following example snippet is taken from our expanding-list-web-component example (see it live also). In this case, our custom element extends the HTMLUListElement , which represents the element.
// Create a class for the element class ExpandingList extends HTMLUListElement constructor() // Always call super first in constructor super(); // constructor definition left out for brevity // … > > // Define the new element customElements.define("expanding-list", ExpandingList, extends: "ul" >);
If we wanted to create an instance of this element programmatically, we’d use a call along the following lines:
let expandingList = document.createElement("ul", is: "expanding-list" >);
The new element will be given an is attribute whose value is the custom element’s tag name.
Note: For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string’s value is the custom element’s tag name.
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- Node.removeChild()
- Node.replaceChild()
- Node.appendChild()
- Node.insertBefore()
- Node.hasChildNodes()
- document.createElementNS() — to explicitly specify the namespace URI for the element.
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
HTML DOM Input Text Object
The Input Text object represents an HTML element with type=»text».
Access an Input Text Object
You can access an element with type=»text» by using getElementById():
Example
Tip: You can also access by searching through the elements collection of a form.
Create an Input Text Object
You can create an element with type=»text» by using the document.createElement() method:
Example
Input Text Object Properties
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of a text field |
| autofocus | Sets or returns whether a text field should automatically get focus when the page loads |
| defaultValue | Sets or returns the default value of a text field |
| disabled | Sets or returns whether the text field is disabled, or not |
| form | Returns a reference to the form that contains the text field |
| list | Returns a reference to the datalist that contains the text field |
| maxLength | Sets or returns the value of the maxlength attribute of a text field |
| name | Sets or returns the value of the name attribute of a text field |
| pattern | Sets or returns the value of the pattern attribute of a text field |
| placeholder | Sets or returns the value of the placeholder attribute of a text field |
| readOnly | Sets or returns whether a text field is read-only, or not |
| required | Sets or returns whether the text field must be filled out before submitting a form |
| size | Sets or returns the value of the size attribute of a text field |
| type | Returns which type of form element a text field is |
| value | Sets or returns the value of the value attribute of the text field |
Input Text Object Methods
| Method | Description |
|---|---|
| blur() | Removes focus from a text field |
| focus() | Gives focus to a text field |
| select() | Selects the content of a text field |
Standard Properties and Events
The Input Text object also supports the standard properties and events.
как сделать input в js
Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.
Пример создания input с типом «text»:
const input = document.createElement('input'); input.type = 'text'; document.body.append(input); В этом примере мы создали элемент input , задали ему тип «text» и добавили его на страницу с помощью метода append .
Можем задавать и другие атрибуты для элемента input , такие как name , value , placeholder и т.д. Например, чтобы добавить атрибут name :
const input = document.createElement('input'); input.type = 'text'; input.name = 'myInput'; document.body.append(input); Как и для других элементов DOM-дерева, для данного input мы можем добавить обработчик события:
const input = document.createElement('input'); input.type = 'text'; input.addEventListener('input', (event) => console.log(event.target.value); >); document.body.append(input); How to Create a Form Dynamically with JavaScript?
Sometimes, we want to create a form dynamically with JavaScript.
In this article, we’ll look at how to create a form dynamically with JavaScript.
Create a Form Dynamically with JavaScript
To create a form dynamically with JavaScript, we can use the document.createElement method to create the element.
Then we can use the setAttribute method to set the element attributes.
Then we can use the appendChild method to append the elements into the parent element.
For instance, we can write:
const f = document.createElement("form"); f.setAttribute('method', "post"); f.setAttribute('action', "submit.php"); const i = document.createElement("input"); i.setAttribute('type', "text"); i.setAttribute('name', "username"); const s = document.createElement("input"); s.setAttribute('type', "submit"); s.setAttribute('value', "Submit"); f.appendChild(i); f.appendChild(s); document.body.appendChild(f); to create a form with an input and a submit button.
const f = document.createElement("form"); f.setAttribute('method', "post"); f.setAttribute('action', "submit.php"); to create a form element with the method and action attributes.
setAttribute takes the attribute name and value as arguments respectively.
Similar, we create the input by writing:
const i = document.createElement("input"); i.setAttribute('type', "text"); i.setAttribute('name', "username"); And the submit button we create by writing:
const s = document.createElement("input"); s.setAttribute('type', "submit"); s.setAttribute('value', "Submit"); Next, we call appendChild on f to append both input elements as children of the form element by writing:
f.appendChild(i); f.appendChild(s); And finally, we append the form element as a child of the body element by writing:
Now we should see a form displayed on the screen after running the code that generated from the form.
Conclusion
To create a form dynamically with JavaScript, we can use the document.createElement method to create the element.
Then we can use the setAttribute method to set the element attributes.
Then we can use the appendChild method to append the elements into the parent element.