Getting Started
29 Nov 20166 minutes to read
The Essential JavaScript Mobile Textbox is used to display or get any value.To create a textbox for the login page in the mobile application, follow the guidelines given.
Create the layout
Create an HTML file and add the following template to the HTML file.
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title>Textbox</title>
<link href="http://cdn.syncfusion.com/23.1.36/js/mobile/ej.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
<script src="http://cdn.syncfusion.com/23.1.36/js/mobile/ej.mobile.all.min.js"> </script>
</head>
<body>
<!--Header Control-->
<div data-role="ejmheader" id="mailheader" data-ej-title="Login"></div>
<div class="sample" style="padding: 62px 15px">
<div class="frame">
<div class="control">
<table class="editors">
<tbody>
<tr>
<td>
<label>
Name
</label>
</td>
<td>
<!--Add Textbox control-->
</td>
</tr>
<tr>
<td>
<label>
Password
</label>
</td>
<td>
<!--Password Control-->
</td>
</tr>
</tbody>
</table>
<center>
<div class="button">
<!--Button Control-->
<input type="button" data-role="ejmbutton" data-ej-text="Login" />
</div>
</center>
</div>
</div>
</div>
<style type="text/css">
td {
padding: 9px;
}
</style>
</body>
</html>Add Textbox Control
To create the Textbox control add the following code.
Execute the above code example to render the following output.
<!--Add Textbox control-->
<input id="textbox_sample" data-role="ejmtextbox" data-ej-watermarktext="User Name" data-ej-width="200"/>
<!--Password Control-->
<input id="password" data-role="ejmpassword" data-ej-watermarktext="Password" data-ej-width="200" />Run the code and get the following output.