1# <input> Development
2
3
4The **<input>** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../reference/apis-arkui/arkui-js/js-components-basic-input.md).
5
6
7## Creating an <input> Component
8
9Create an **<input>** component in the .hml file under **pages/index**.
10
11```html
12<!-- xxx.hml -->
13<div class="container">       
14  <input type="text">             
15     Please enter the content  
16  </input>
17</div>
18```
19
20```css
21/* xxx.css */
22.container {
23  width: 100%;
24  height: 100%;
25  flex-direction: column;
26  justify-content: center;
27  align-items: center;
28  background-color: #F1F3F5;
29}
30```
31
32![en-us_image_0000001222807768](figures/en-us_image_0000001222807768.png)
33
34
35## Setting the Input Type
36
37Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
38
39```html
40<!-- xxx.hml -->
41<div class="container">
42  <div class="div-button">
43    <dialog class="dialogClass" id="dialogId">
44      <div class="content">
45        <text>this is a dialog</text>
46      </div>
47    </dialog>
48    <input class="button" type="button" value="click" onclick="btnclick"></input>
49  </div>
50  <div class="content">
51    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
52  </div>
53  <div class="content">
54    <input type="date" class="flex" placeholder="Enter data"></input>
55  </div>
56</div>
57```
58
59```css
60/* xxx.css */
61.container {
62  width: 100%;
63  height: 100%;
64  align-items: center;
65  flex-direction: column;
66  justify-content: center;
67  background-color: #F1F3F5 ;
68}
69.div-button {
70  flex-direction: column;
71  align-items: center;
72}
73.dialogClass{
74  width:80%;
75  height: 200px;
76}
77.button {
78  margin-top: 30px;
79  width: 50%;
80}
81.content{
82  width: 90%;
83  height: 150px;
84  align-items: center;
85  justify-content: center;
86}
87.flex {
88  width: 80%;
89  margin-bottom:40px;
90}
91```
92
93```js
94// xxx.js
95export default {
96  btnclick(){
97    this.$element('dialogId').show()
98  },
99}
100```
101
102
103![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
104
105
106> **NOTE**
107> - For wearables, the input type can only be **button**, **radio**, or **checkbox**.
108>
109> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**.
110
111
112## Event Binding
113
114  Add the **search** and **translate** events to the **&lt;input&gt;** component.
115
116```html
117<!-- xxx.hml -->
118<div class="content">
119  <text style="margin-left: -7px;">
120    <span>Enter text and then touch and hold what you've entered</span>
121  </text>
122  <input class="input" type="text" onsearch="search" placeholder="search"> </input>
123  <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
124</div>
125```
126
127```css
128/* xxx.css */
129.content {
130  width: 100%;
131  height: 100%;
132  flex-direction: column;
133  align-items: center;
134  justify-content: center;
135  background-color: #F1F3F5;
136}
137.input {
138  margin-top: 50px;
139  width: 60%;
140  placeholder-color: gray;
141}
142text{
143  width:100%;
144  font-size:25px;
145  text-align:center;
146}
147```
148
149```js
150// xxx.js
151import promptAction from '@ohos.promptAction'
152export default {
153  search(e){
154    promptAction.showToast({
155      message:  e.value,
156      duration: 3000,
157    });
158  },
159  translate(e){
160    promptAction.showToast({
161      message:  e.value,
162      duration: 3000,
163    });
164  }
165}
166```
167
168![en-us_image_0000001267647853](figures/en-us_image_0000001267647853.gif)
169
170
171## Setting the Input Error Message
172
173Add the **showError** method to the **&lt;input&gt;** component to display an error message in the event of incorrect input.
174
175```html
176<!-- xxx.hml -->
177<div class="content">
178  <input id="input" class="input" type="text"  maxlength="20" placeholder="Please input text" onchange="change">
179  </input>
180  <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
181</div>
182```
183
184```css
185/* xxx.css */
186.content {
187  width: 100%;
188  height: 100%;
189  flex-direction: column;
190  align-items: center;
191  justify-content: center;
192  background-color: #F1F3F5;
193}
194.input {
195  width: 80%;
196  placeholder-color: gray;
197}
198.button {
199  width: 30%;
200  margin-top: 50px;
201}
202```
203
204```js
205// xxx.js
206import promptAction from '@ohos.promptAction' 
207 export default { 
208   data:{ 
209     value:'', 
210   }, 
211   change(e){ 
212     this.value = e.value; 
213     promptAction.showToast({ 
214     message: "value: " + this.value, 
215       duration: 3000, 
216      }); 
217   }, 
218   buttonClick(e){ 
219     if(this.value.length > 6){ 
220       this.$element("input").showError({        
221         error:  'Up to 6 characters are allowed.'       
222       }); 
223      }else if(this.value.length == 0){ 
224        this.$element("input").showError({         
225          error:this.value + 'This field cannot be left empty.'       
226        }); 
227      }else{ 
228        promptAction.showToast({ 
229          message: "success " 
230        }); 
231      } 
232   }, 
233 }
234```
235
236![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
237
238> **NOTE**
239>
240> This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
241
242
243## Example Scenario
244
245
246Enter information by using the **&lt;input&gt;** component of the type that suits your needs.
247
248
249```html
250<!-- xxx.hml -->
251<div class="container">    
252  <div class="label-item"> 
253    <label>memorandum</label>   
254  </div>    
255  <div class="label-item">        
256    <label class="lab" target="input1">content:</label>        
257    <input class="flex" id="input1" placeholder="Enter content" />    
258  </div>    
259  <div class="label-item">        
260    <label class="lab" target="input3">date:</label>        
261    <input class="flex" id="input3" type="date" placeholder="Enter data" />    
262  </div>    
263  <div class="label-item">        
264    <label class="lab" target="input4">time:</label>        
265    <input class="flex" id="input4" type="time" placeholder="Enter time" />    
266  </div>   
267  <div class="label-item">        
268    <label class="lab" target="checkbox1">Complete:</label>        
269    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />    
270  </div>    
271  <div class="label-item">        
272    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>    
273  </div>
274</div>
275```
276
277
278```css
279/* xxx.css */
280.container { 
281  flex-direction: column;
282  background-color: #F1F3F5;
283}
284.label-item {   
285  align-items: center;
286  border-bottom-width: 1px;border-color: #dddddd;
287}
288.lab {    
289  width: 400px;}
290label {    
291  padding: 30px;
292  font-size: 30px;      
293  width: 320px;
294  font-family: serif;
295  color: #9370d8;
296  font-weight: bold;
297}
298.flex {    
299  flex: 1;
300}
301.textareaPadding {    
302  padding-left: 100px;
303}
304```
305
306
307```js
308// xxx.js
309import promptAction from '@ohos.promptAction';
310export default {    
311  data: {    
312  },    
313  onInit() { 
314  },   
315  btnclick(e) {        
316    promptAction.showToast({            
317      message:'Saved successfully!'        
318    })    
319  }
320}     
321```
322
323
324![en-us_image_0000001222807760](figures/en-us_image_0000001222807760.gif)
325