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