1# input开发指导
2
3input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[input API](../reference/apis-arkui/arkui-js/js-components-basic-input.md)。
4
5
6## 创建input组件
7
8在pages/index目录下的hml文件中创建一个input组件。
9
10```html
11<!-- xxx.hml -->
12<div class="container">
13  <input type="text">
14     Please enter the content
15  </input>
16</div>
17```
18
19```css
20/* xxx.css */
21.container {
22  width: 100%;
23  height: 100%;
24  flex-direction: column;
25  justify-content: center;
26  align-items: center;
27  background-color: #F1F3F5;
28}
29```
30
31![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png)
32
33
34## 设置input类型
35
36通过设置type属性来定义input类型，如将input设置为button、date等。
37
38```html
39<!-- xxx.hml -->
40<div class="container">
41  <div class="div-button">
42    <dialog class="dialogClass" id="dialogId">
43      <div class="content">
44        <text>this is a dialog</text>
45      </div>
46    </dialog>
47    <input class="button" type="button" value="click" onclick="btnclick"></input>
48  </div>
49  <div class="content">
50    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
51  </div>
52  <div class="content">
53    <input type="date" class="flex" placeholder="Enter data"></input>
54  </div>
55</div>
56```
57
58```css
59/* xxx.css */
60.container {
61  width: 100%;
62  height: 100%;
63  align-items: center;
64  flex-direction: column;
65  justify-content: center;
66  background-color: #F1F3F5 ;
67}
68.div-button {
69  flex-direction: column;
70  align-items: center;
71}
72.dialogClass{
73  width:80%;
74  height: 200px;
75}
76.button {
77  margin-top: 30px;
78  width: 50%;
79}
80.content{
81  width: 90%;
82  height: 150px;
83  align-items: center;
84  justify-content: center;
85}
86.flex {
87  width: 80%;
88  margin-bottom:40px;
89}
90```
91
92```js
93// xxx.js
94export default {
95  btnclick(){
96    this.$element('dialogId').show()
97  },
98}
99```
100
101
102![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif)
103
104
105> **说明：**
106>
107> 仅当input类型为checkbox和radio时，当前组件选中的属性是checked才生效，默认值为false。
108
109
110## 事件绑定
111
112向input组件添加search和translate事件。
113```html
114<!-- xxx.hml -->
115<div class="content">
116  <text style="margin-left: -7px;">
117    <span>Enter text and then touch and hold what you've entered</span>
118  </text>
119  <input class="input" type="text" onsearch="search" placeholder="search"> </input>
120  <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
121</div>
122```
123
124```css
125/* xxx.css */
126.content {
127  width: 100%;
128  height: 100%;
129  flex-direction: column;
130  align-items: center;
131  justify-content: center;
132  background-color: #F1F3F5;
133}
134.input {
135  margin-top: 50px;
136  width: 60%;
137  placeholder-color: gray;
138}
139text{
140  width:100%;
141  font-size:25px;
142  text-align:center;
143}
144```
145
146```js
147// xxx.js
148import promptAction from '@ohos.promptAction'
149export default {
150  search(e){
151    promptAction.showToast({
152      message:  e.value,
153      duration: 3000,
154    });
155  },
156  translate(e){
157    promptAction.showToast({
158      message:  e.value,
159      duration: 3000,
160    });
161  }
162}
163```
164
165![zh-cn_image_0000001189088264](figures/zh-cn_image_0000001189088264.gif)
166
167
168## 设置输入提示
169
170通过对input组件添加showError方法来提示输入的错误原因。
171
172```html
173<!-- xxx.hml -->
174<div class="content">
175  <input id="input" class="input" type="text"  maxlength="20" placeholder="Please input text" onchange="change">
176  </input>
177  <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
178</div>
179```
180
181```css
182/* xxx.css */
183.content {
184  width: 100%;
185  height: 100%;
186  flex-direction: column;
187  align-items: center;
188  justify-content: center;
189  background-color: #F1F3F5;
190}
191.input {
192  width: 80%;
193  placeholder-color: gray;
194}
195.button {
196  width: 30%;
197  margin-top: 50px;
198}
199```
200
201```js
202// xxx.js
203import promptAction from '@ohos.promptAction'
204 export default {
205   data:{
206     value:'',
207   },
208   change(e){
209     this.value = e.value;
210     promptAction.showToast({
211     message: "value: " + this.value,
212       duration: 3000,
213      });
214   },
215   buttonClick(e){
216     if(this.value.length > 6){
217       this.$element("input").showError({
218         error:  'Up to 6 characters are allowed.'
219       });
220      }else if(this.value.length == 0){
221        this.$element("input").showError({
222          error:this.value + 'This field cannot be left empty.'
223        });
224      }else{
225        promptAction.showToast({
226          message: "success "
227        });
228      }
229   },
230 }
231```
232
233![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif)
234
235> **说明：**
236>
237> 该方法在input类型为text、email、date、time、number和password时生效。
238
239
240## 场景示例
241
242
243根据场景选择不同类型的input输入框，完成信息录入。
244
245
246```html
247<!-- xxx.hml -->
248<div class="container">
249  <div class="label-item">
250    <label>memorandum</label>
251  </div>
252  <div class="label-item">
253    <label class="lab" target="input1">content:</label>
254    <input class="flex" id="input1" placeholder="Enter content" />
255  </div>
256  <div class="label-item">
257    <label class="lab" target="input3">date:</label>
258    <input class="flex" id="input3" type="date" placeholder="Enter data" />
259  </div>
260  <div class="label-item">
261    <label class="lab" target="input4">time:</label>
262    <input class="flex" id="input4" type="time" placeholder="Enter time" />
263  </div>
264  <div class="label-item">
265    <label class="lab" target="checkbox1">Complete:</label>
266    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />
267  </div>
268  <div class="label-item">
269    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>
270  </div>
271</div>
272```
273
274
275```css
276/* xxx.css */
277.container {
278  flex-direction: column;
279  background-color: #F1F3F5;
280}
281.label-item {
282  align-items: center;
283  border-bottom-width: 1px;border-color: #dddddd;
284}
285.lab {
286  width: 400px;}
287label {
288  padding: 30px;
289  font-size: 30px;
290  width: 320px;
291  font-family: serif;
292  color: #9370d8;
293  font-weight: bold;
294}
295.flex {
296  flex: 1;
297}
298.textareaPadding {
299  padding-left: 100px;
300}
301```
302
303
304```js
305// xxx.js
306import promptAction from '@ohos.promptAction';
307export default {
308  data: {
309  },
310  onInit() {
311  },
312  btnclick(e) {
313    promptAction.showToast({
314      message:'Saved successfully!'
315    })
316  }
317}
318```
319
320
321![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
322