Text box: Difference between revisions

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
 
imported>GhostInTheMachine
ce
 
Line 1: Line 1:
{{Short description|Boxes where text is entered in computing}}
{{Short description|GUI elements for entering or displaying text}}
{{more citations needed|date=February 2017}}
{{more citations needed|date=February 2017}}
[[Image:Textbox2.gif|thumb|A text entry box]]
[[Image:Textbox2.gif|thumb|A text entry box]]
[[Image:Textarea text entry box.png|thumb|A multi-line "textarea" text box in a [[web browser]]]]
[[Image:Textarea text entry box.png|thumb|A multi-line "textarea" text box in a [[web browser]]]]


A '''text box''' also called an '''input box''', '''text field''' or '''text entry box''', is a control element of a [[graphical user interface]], that should enable the user to input text information to be used by a program.<ref>{{Cite web |title=What does text box mean? |url=https://www.definitions.net/definition/text+box |access-date=2020-08-08 |website=www.definitions.net}}</ref><ref>{{Cite web |title=Text Box Definition|url=https://techterms.com/definition/text_box |access-date=2020-08-08 |website=techterms.com}}</ref> [[Human Interface Guidelines]] recommend a single-line text box when only one line of input is required, and a multi-line text box only if more than one line of input may be required. Non-editable text boxes can serve the purpose of simply displaying text.
A '''text box''', also called an '''input box''', '''text field''' or '''text entry box''', is a control element of a [[graphical user interface]] (GUI) that allows users to enter text for processing by a program.<ref>{{Cite web |title=What does text box mean? |url=https://www.definitions.net/definition/text+box |access-date=2020-08-08 |website=www.definitions.net}}</ref><ref>{{Cite web |title=Text Box Definition|url=https://techterms.com/definition/text_box |access-date=2020-08-08 |website=techterms.com}}</ref>


A typical text box is a rectangle of any size, possibly with a border that separates the text box from the rest of the interface. Text boxes may contain zero, one, or two [[scrollbar]]s. Text boxes usually display a [[text cursor]] (commonly a blinking vertical line), indicating the current region of text being edited. It is common for the [[computer mouse|mouse]] [[cursor (computers)|cursor]] to change its shape when it hovers over a text box.
A typical text box is a rectangle, possibly with a border that separates the text box from the rest of the interface. Text boxes may contain horizontal and vertical [[scrollbar]]s. Text boxes usually display a [[text cursor]] (commonly a blinking vertical line), indicating the current region of text being edited. It is common for the [[computer mouse|mouse]] [[cursor (computers)|cursor]] to change its shape when it hovers over a text box.<ref>{{Cite web |title=Text box - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/controls/text-box |access-date=2025-06-22 |website=Microsoft Learn}}</ref>


== Standard functionality ==
== Standard functionality ==
Typical implementations allow a user to do the following. (The keys indicated relate to the text box widgets in Microsoft Windows and Mac OS X; similar if not identical keyboard bindings exist under the [[X Window System]] and other systems, and typically follow the same scheme as Windows.)


===Enter text===
Although most operating systems and GUI frameworks provide text box controls with extensive built-in functionality, some applications, such as video games, may implement simplified versions.


When keys are pressed on a keyboard, the text appears where the caret is. Some very simple text boxes may not show a caret, which would suggest that new characters typed in will appear at the end of the current text.
=== Enter text ===


===Navigate and manipulate text===
When keys are pressed on a keyboard, the text is added at the caret location. Some very simple text boxes may not show a caret, which would suggest that new characters typed in will appear at the end of the current text.
 
=== Navigate and manipulate text ===


Using a mouse:
Using a mouse:
Line 22: Line 23:


Using the keyboard:
Using the keyboard:
* Pressing [[arrow keys]] changes caret position by one character or line (in multiline text boxes);
* Pressing [[arrow keys]] changes the caret position by one character or line
* Pressing {{Key press|Home}} / {{Key press|End}} keys ([[Microsoft Windows|Microsoft's Windows OS]]) or {{Key press|[[Command key|Command]]}}-left arrow / Command-right arrow ([[Apple Inc.|Apple]]'s [[Mac OS]]) moves the caret to the beginning / end of the line;
* Pressing {{Key press|Home}} / {{Key press|End}} keys ([[Microsoft Windows|Microsoft's Windows OS]]) or {{Key press|[[Command key|Command]]}}-left arrow / Command-right arrow ([[Apple Inc.|Apple]]'s [[Mac OS]]) moves the caret to the beginning / end of the line
* Pressing {{Key press|Page Up}} / {{Key press|Page Down}} moves the caret a page (the number of lines that can be displayed in the text box at a time) backward / forward (Windows) or moves the [[scrollbar]] thumb a page backward / forward without changing the caret position (Mac OS);
* Pressing {{Key press|Page Up}} / {{Key press|Page Down}} moves the caret a page (the number of lines that can be displayed in the text box at a time) backward / forward (Windows) or moves the [[scrollbar]] thumb a page backward / forward without changing the caret position (Mac OS)
* Holding the {{Key press|[[Control key|Ctrl]]}} key (Windows) while pressing arrow keys or {{Key press|Home}} / {{Key press|End}} keys makes the caret move at larger steps, e.g. words, paragraphs or beginning / end of document;
* Holding the {{Key press|[[Control key|Ctrl]]}} key (Windows) while pressing arrow keys or {{Key press|Home}} / {{Key press|End}} keys makes the caret move at larger steps, e.g. words, paragraphs or beginning / end of document
* Holding the {{Key press|[[Option key]]}} (Mac OS) while pressing arrows moves the caret whole words or paragraphs;
* Holding the {{Key press|[[Option key]]}} (Mac OS) while pressing arrows moves the caret whole words or paragraphs
* Holding the {{Key press|[[Command key]]}} while pressing up or down arrows (Mac OS) or Holding the {{Key press|Ctrl}} key while pressing {{Key press|home}} / {{Key press|end}} (Windows) moves the caret to the beginning or end of the document;
* Holding the {{Key press|[[Command key]]}} while pressing up or down arrows (Mac OS) or holding the {{Key press|Ctrl}} key while pressing {{Key press|Home}} / {{Key press|End}} (Windows) moves the caret to the beginning or end of the document
* Holding the {{Key press|[[shift key]]}} while changing the caret position with a mouse or keyboard selects the text between the caret position from when shift was first pressed and its current position.
* Holding the {{Key press|[[Shift key]]}} while changing the caret position with a mouse or keyboard selects the text between the caret position from when Shift was first pressed and its current position
* Pressing {{Key press|Control|A}} (Windows) selects all text.
* Pressing {{Key press|Control|A}} (Windows) selects all text


===Edit text===
===Edit text===
Work in insert or overwrite mode, typically switched using {{Key press|[[Insert key]]}}. In insert mode if there is a character to the right of the caret, the new character will be inserted before it, while in overwrite mode typing a new character will replace (overwrite) the character to the right of the caret position.
Work in insert or overwrite mode, typically switched using {{Key press|[[Insert key]]}}. In insert mode if there is a character to the right of the caret, the new character will be inserted before it, while in overwrite mode typing a new character will replace (overwrite) the character to the right of the caret position.


Typing in a text while some part of the text already entered is selected will replace the selected text.
Typing in text while some part of the text already entered is selected will replace the selected text.


{{Key press|[[Delete key|Delete]]}} / {{Key press|[[Backspace]]}} keys remove one character right / left of current caret position, while pressing them together with the {{Key press|Ctrl}} or {{Key press|command key}} removes one word.
{{Key press|[[Delete key|Delete]]}} / {{Key press|[[Backspace]]}} keys remove one character right / left of current caret position, while pressing them together with the {{Key press|Ctrl}} or {{Key press|command key}} removes one word.
Line 40: Line 41:
Edit the text using standard [[Clipboard (software)|clipboard]] operations.
Edit the text using standard [[Clipboard (software)|clipboard]] operations.


Edits can be [[undo]]ne and [[redo]]ne with [[Control-Z|{{Key press|Ctrl|Z}}]] / [[Control-Y|{{Key press|Ctrl|Y}}]] (Windows) or {{Key press|command|Z}} / {{Key press|command|shift|Z}} (Mac OS)
Edits can be [[undo]]ne and [[redo]]ne with [[Control-Z|{{Key press|Ctrl|Z}}]] / [[Control-Y|{{Key press|Ctrl|Y}}]] (Windows) or {{Key press|Command|Z}} / {{Key press|Command|Shift|Z}} (Mac OS)
 
== Alternative meanings ==
 
The term "text box" is also used in [[typography]], [[desktop publishing]] and [[print design]] to describe a visually distinct container for text. These text boxes are typically bordered or shaded regions used to highlight quotations, sidebars or supplementary information. They are common in [[magazine]]s, [[newspaper]]s, [[textbook]]s and [[technical documentation]]. This usage predates digital interfaces and remains common in print and layout design.
 
In this context, a text box may:
* Be floated to the side of the main content, with surrounding text wrapping around it.
* Include a border, background color or other visual styling.
* Serve as a [[callout]], [[pull quote]] or [[sidebar]].
 
On Wikipedia, similar visual elements are created using [[Wikipedia:Template|templates]] such as:
* {{tl|Infobox}} – for structured summaries, typically aligned to the right.
* {{tl|Sidebar}} – for navigational or thematic groupings.
* {{tl|Quote box}} – for styled quotations.
* {{tl|Ambox}} – for article message boxes.
 
These components are not interactive input fields, but rather layout tools for organizing and emphasizing content.
 
== See also ==
* [[Callout]]
* [[Pull quote]]
* [[Infobox]]
* [[Template:Quote box]]


==References and notes==
==References and notes==

Latest revision as of 06:44, 23 June 2025

Template:Short description Template:More citations needed

File:Textbox2.gif
A text entry box
File:Textarea text entry box.png
A multi-line "textarea" text box in a web browser

A text box, also called an input box, text field or text entry box, is a control element of a graphical user interface (GUI) that allows users to enter text for processing by a program.[1][2]

A typical text box is a rectangle, possibly with a border that separates the text box from the rest of the interface. Text boxes may contain horizontal and vertical scrollbars. Text boxes usually display a text cursor (commonly a blinking vertical line), indicating the current region of text being edited. It is common for the mouse cursor to change its shape when it hovers over a text box.[3]

Standard functionality

Although most operating systems and GUI frameworks provide text box controls with extensive built-in functionality, some applications, such as video games, may implement simplified versions.

Enter text

When keys are pressed on a keyboard, the text is added at the caret location. Some very simple text boxes may not show a caret, which would suggest that new characters typed in will appear at the end of the current text.

Navigate and manipulate text

Using a mouse:

  • Change the caret position by clicking the desired point with a mouse cursor;
  • Select a portion of text by pressing the main mouse button while pointing the cursor at one end of the desired part of the text and dragging the cursor to the other end while holding the button pressed.

Using the keyboard:

Edit text

Work in insert or overwrite mode, typically switched using Template:Key press. In insert mode if there is a character to the right of the caret, the new character will be inserted before it, while in overwrite mode typing a new character will replace (overwrite) the character to the right of the caret position.

Typing in text while some part of the text already entered is selected will replace the selected text.

Template:Key press / Template:Key press keys remove one character right / left of current caret position, while pressing them together with the Template:Key press or Template:Key press removes one word.

Edit the text using standard clipboard operations.

Edits can be undone and redone with [[Control-Z|Template:Key press]] / [[Control-Y|Template:Key press]] (Windows) or Template:Key press / Template:Key press (Mac OS)

Alternative meanings

The term "text box" is also used in typography, desktop publishing and print design to describe a visually distinct container for text. These text boxes are typically bordered or shaded regions used to highlight quotations, sidebars or supplementary information. They are common in magazines, newspapers, textbooks and technical documentation. This usage predates digital interfaces and remains common in print and layout design.

In this context, a text box may:

  • Be floated to the side of the main content, with surrounding text wrapping around it.
  • Include a border, background color or other visual styling.
  • Serve as a callout, pull quote or sidebar.

On Wikipedia, similar visual elements are created using templates such as:

These components are not interactive input fields, but rather layout tools for organizing and emphasizing content.

See also

References and notes

Template:Notelist Template:Reflist

Template:Graphical control elements

  1. Script error: No such module "citation/CS1".
  2. Script error: No such module "citation/CS1".
  3. Script error: No such module "citation/CS1".