AT&T Developer
  • Products
  • Resources
  • Blog
  • Sign In

Technical Library

    Device Technologies
    • Biometrics
    • Device Detection
    • HTML5
    • Mobile Web Fundamentals
    • Mobile Web Standards
    • Multi Core Coding in Dalvik
    • Multi Thread Coding in Android
    • Near Field Communication
    • NFC Forum
    • NFC Use Cases
    • NFC Case Studies
    • NFC Tags
    • GlobalPlatform and NFC
    • User Identification
    • Native Code
    Security and Privacy
    • Application Privacy Guidelines
    • Downloading DRM Content in Android
    • IPv6
    • Likelihood of a Successful Attack
    • Messaging Privacy
    • Mobile Web Security
    • Network Security
    • Security Policy
    • Security at AT&T
    • Types of Security Threats
    • Wireless Application Security
    • Security Policy Enforcement
    UI Elements
    • Slider Controls for Android
    • Check Box for Android
    • Dropdown for Android
    • Image Button for Android
    • Toggle Button for Android
    • Radio Button for Android
    • Segmented Text Toggle Button for Android
    • Static Text Toggle Button for Android
    • Switch for Android
    • Text Fields for Android
    • Getting Started with AT&T UI
    • HTML5 UI Elements
    • HTML5 Checkboxes
    • HTML5 Dropdown
    • HTML5 Image Button
    • HTML5 Image Toggle Button
    • HTML5 Radio Button
    • HTML5 Segmented Toggle Button
    • HTML5 Slider
    • HTML5 Static Text Toggle Button
    • HTML5 Switch Control
    • HTML5 Text Fields
    Network Technologies
    • IP Addresses
    • Long Term Evolution (LTE)
    • Network Timers
    • Wi-Fi
  • Other AT&T Websites
  • Best Practices
    • Hackathon Best Practices
    • Mobile Best Practices
    • Seven Common Errors Around Creating Mobile User Experiences
toggle menu

HTML5 Text Fields

 

Text Field UI elements enable users to enter text into an application. There are five types of Text Field UI elements:

TypeDescription
Standard When more text is entered than the field can display, all
characters are shifted to the left and new characters appear
on the right.
When more text is entered than the field can display, all characters are shifted to the left and new characters appear on the right.
Expanding When entered text reaches the end of the field, the field expands vertically by one line, until it reaches a configurable number of lines.
Editable Text content can be switched from a read-only mode into an editable mode.
Search A search icon appears at the beginning of the field
Clear Text Input A button appears on the right which when it is clicked, the entered text is cleared.

 

text inputs widnowtext inputs widnow

 

Creation of Standard Text Fields

For creating a standard text field add the following code:

<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>

 

Creation of Editable Text Fields

For creating a editable text field add the following code:

<div data-role="fieldcontain">
<label for="name">Text Input (Read-only):</label>
<input type="text" name="name" id="name" value="This is a read-only text input" readonly="readonly" />
</div>

Adding the readonly="readonly" attribute to the input component, the textfield becomes read-only and grayed out.

 

Expanding Text Fields

For creating a expanding text field add the following code:

<div data-role="fieldcontain">
<label for="textarea">Expanding Text Input:</label>
<textarea cols="40" rows="2" name="textarea" id="textarea"></textarea>
</div>

Note that the html component in this case is a text area, and not a input field.

 

Search Text Fields

For creating a search text field add the following code:

<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="search" id="search" value="" />
</div>

Here we are using the html5 input type="search". The search icon is automatically added on the left.

 

Clear Text Input

For creating a clear text field add the following code:

<div data-role="fieldcontain" class="ui-field-contain-clear-input">
<label for="name">Text Input with clear:</label>
<input type="search" name="search" id="search" value="" />
</div>

The class="ui-field-contain-clear-input" is required in this case to make appear a 'X' button on the right. This button clears the entered text.

 

Full code

<body>
<div data-role="page">
<div data-role="header" class="ui-bar-a ui-header" role="banner">
<a id="backButton" href="/index.html" data-icon="arrow-l" data-theme="a">Back</a>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Form Elements</h1>
</div>
<div data-role="content" class="ui-body-c">
<form action="form.php" method="post">
<h2>Text Inputs</h2>
<!-- Standard text input -->
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<!-- Standard text input (read-only mode) -->
<div data-role="fieldcontain">
<label for="name">Text Input (Read-only):</label>
<input type="text" name="name" id="name" value="This is a read-only text input" readonly="readonly" />
</div>
<!-- Text Input with clear button -->
<div data-role="fieldcontain" class="ui-field-contain-clear-input">
<label for="name">Text Input with clear:</label>
<input type="search" name="search" id="search" value="" />
</div>
<!-- Search Text Input with Clear Button -->
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="search" id="search" value="" />
</div>
<!-- Expanding Text Input. You can add a maxrows parameter to define the maximum number of lines which it extends -->
<div data-role="fieldcontain">
<label for="textarea">Expanding Text Input:</label>
<textarea cols="40" rows="2" name="textarea" id="textarea"></textarea>
</div>
</form>
</div>
</div>
</body>
Back To Top
  • APIS & TOOLS
    • AT&T Video Optimizer
  • APIS & TOOLS
    • Futurist Reports
    • Technical Library
  • SUPPORT
    • Contact Us
    • FAQs
    • Twitter
  • AT&T Developer Program on Github
  • AT&T Developer Program on Facebook
  • AT&T Developer Program on Twitter
AT&T Logo

Terms of Use   Privacy Policy   Your Privacy Choices California Consumer Privacy Act (CCPA) Opt-Out Icon
©2025 AT&T Intellectual Property. All rights reserved

AT&T, the AT&T logo and all other AT&T marks contained herein are trademark of AT&T Intellectual Property and/or AT&T affiliated companies.

14100000
Session Expiring

Your session is about to expire in !

Stay Signed In
Session Expired

Sorry! Your session has expired.

Skip to content