Form

Share how to use the Form UI.

1. Input Line

Image

../_images/list01-1.png

Markup Code

1
 <input type="text" class="ddp-input-type" value="text">

2. Input Basic

Image

../_images/list02-1.png

Markup Code

1
 <input type="text" class="ddp-input-typebasic" value="text">

3. Input Basic Disabled

Image

../_images/list03-1.png

Markup Code

1
 <input type="text" class="ddp-input-typebasic ddp-disabled" value="text">

4. Input Basic Error

Image

../_images/list04-1.png

Markup Code

1
 <input type="text" class="ddp-input-typebasic ddp-error" value="red">

5. Input Apply Edit

Image

../_images/list05-1.png

Markup Code

1
2
3
4
5
 <div class="ddp-input-apply ddp-edit">
     <input type="text" value="test" class="ddp-input-txt">
     <em class="ddp-icon-apply"></em>
     <em class="ddp-icon-apply-loading"></em>
 </div>

6. Input Apply Loading

Image

../_images/list06-1.png

Markup Code

1
2
3
4
5
 <div class="ddp-input-apply ddp-loading">
     <input type="text" value="test" class="ddp-input-txt">
     <em class="ddp-icon-apply"></em>
     <em class="ddp-icon-apply-loading"></em>
 </div>

7. Input Apply Calendar

Image

../_images/list07-1.png

Markup Code

1
2
3
 <div class="ddp-form-calen">
     <input type="text" class="ddp-input-typebasic ddp-value ddp-calen" placeholder="변수명 입력">
 </div>

7. Textarea

Image

../_images/list08-1.png

Markup Code

1
 <textarea class="ddp-textarea-auto" placeholder="text"></textarea>