HTML
2016.06.01 13:54

Form 요소 설명

조회 수 12831 추천 수 0 댓글 4
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Form 요소 설명

 

 

1. Text

 

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

 

 

2. Radio

 

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

 

 

3. Submit

 

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

 

 

4. Name Attribute

 

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

 

 

5. Grouping Form Data

 

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

 

 

6. The <select> Element (Drop-Down List)

 

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

 

<option value="fiat" selected>Fiat</option>

 

 

7. The <textarea> Element

 

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

 

 

8. The <button> Element

 

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

 

9. HTML5 <datalist> Element

 

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

 

 

10. HTML5 <keygen> Element

 

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

 

 

11. HTML5 <output> Element

 

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

 

 

12. Input Type: password

 

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

 

 

13. Input Type: checkbox

 

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

 

 

14. Input Type: number

 

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

 

 

15. Input Type: date

 

<form>
  Birthday:
  <input type="date" name="bday">
</form>

 

 

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

 

 

16. Input Type: color

 

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

 

 

17. Input Type: range

 

<form>
  <input type="range" name="points" min="0" max="10">
</form>

 

 

18. Input Type: month

 

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

 

 

19. Input Type: week

 

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

 

 

20. Input Type: time

 

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

 

 

21. Input Type: datetime

 

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

 

 

22. Input Type: datetime-local

 

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

 

 

23. Input Type: email

 

<form>
  E-mail:
  <input type="email" name="email">
</form>

 

 

24. Input Type: search

 

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

 

 

25. Input Type: tel

 

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

 

 

26. Input Type: url

 

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

 

 

27. The value Attribute

 

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

 

28. The readonly Attribute

 

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

 

29. The disabled Attribute

 

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

 

30. The size Attribute

 

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

 

31. The maxlength Attribute

 

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

 

32. The autocomplete Attribute

 

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

 

 

33. The autofocus Attribute

 

First name:<input type="text" name="fname" autofocus>

 

 

34. The height and width Attributes

 

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

 

 

35. The list Attribute

 

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

 

 

36. The min and max Attributes

 

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

 

 

37. The placeholder Attribute

 

<input type="text" name="fname" placeholder="First name">

 

 

38. The required Attribute

 

Username: <input type="text" name="usrname" required>

 

 

39. The step Attribute

 

<input type="number" name="points" step="3">

 

 

 

 

?
  • ?
    KKMS 2016.06.02 15:40

    <style>
    .group input { display:none; }
    .button:hover { cursor:pointer }
    .button {
        display:inline-block; font-size: 20px;
        padding:5px; text-align:center;
        width: 50px; height: 40px;
        line-height:35px; font-weight:700;
        border-radius:3px; background:#eee;
        color:#777; border:1px solid #ccc;
    }
    .group input:nth-of-type(1):checked ~ label:nth-of-type(1) {     background:tomato; color:#fff;
    }
    .group input:nth-of-type(2):checked ~ label:nth-of-type(2) {
        background:gold; color:#f00;
    }
    </style>
    <div class="group">
            <input id="rad1" type="radio" name="gender" checked="checked" />
            <input id="rad2" type="radio" name="gender" />
            <label for="rad1" class="button">남자</label>
            <label for="rad2" class="button">여자</label>
    </div>        

  • ?
    CDR 2016.06.17 15:22

    <style>
    * { 
        margin: 0px;
        padding: 0px;
    }
    .jumsoo {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        border-radius: 50px;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
        background-color: gold;
        color: red;
    }
    .inBox {
        background-color: gold;
    }
    .result {
        width: 100px;
        height: 30px;
        border: 0px solid blue;
        border-radius: 5px;
        background-color: blue;
        color: white;
        text-align: center;
        line-height: 30px;
        cursor: pointer
    }
    </style>
    <p id="printX" class="jumsoo">안녕</p>
    <input type="range" value="" class="inBox" id="inputSize" min="1" max="30">
    <input type="color" value="" class="inBox" id="inputNumber">
    <p class="result" onclick="printResult()">표시</p>
    <script>
    function printResult() {
        var sizeX = document.getElementById("inputSize").value;
        document.getElementById("printX").style.fontSize = sizeX+"px";    
        var strX = document.getElementById("inputNumber").value;
        document.getElementById("printX").style.color = strX;
    }
    </script>
     

  • ?
    KKMS 2020.06.25 14:34

    <style>

    * { margin: 0px; padding: 0px; color: rgba(20,20,20, 0.7); }

    .imgArea { display: block; width: 226px; height: 150px; background-image: url("http://fact119.com/zard/images1.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }

    </style>

      <input id="sC1" type="radio" name="selCity" value="ansan" checked> 안산

      <input id="sC2" type="radio" name="selCity" value="seoul"> 서울

      <input id="sC3" type="radio" name="selCity" value="busan"> 부산

      <button id="selC">도시선택</button>

    <div id="imgArea" class="imgArea"></div>

    <script>

    let selC = document.getElementById("selC");

    let sc1 = document.getElementById("sc1");

    let sc2 = document.getElementById("sc2");

    let sc3 = document.getElementById("sc3");

    let imgArea = document.getElementById("imgArea");

    let selV = 0;

    sC1.onclick = function() { selV = 0; }

    sC2.onclick = function() { selV = 1; }

    sC3.onclick = function() { selV = 2; }

    selC.onclick = function() {

    let imgMap = [

      'url("http://fact119.com/zard/images1.jpg")',

    'url("http://fact119.com/zard/images2.jpg")',

    'url("http://fact119.com/zard/images3.jpg")'

            ];

            imgArea.style.backgroundImage = imgMap[selV];   

    }

    </script>

  • ?
    KKMS 2020.06.25 16:30
    <style>
    * { margin: 0px; padding: 0px; }
    .myPara { width: 100px; height: 105px; overflow: hidden; border: 5px solid red; }
    </style>
    <div id="myPara" class="myPara">ZARD는 1991년에 첫 번째 싱글 《Good-bye My Loneliness》로 데뷔하였다. 5번째 싱글 《In my arms tonight》 발표 직후, 베이스를 담당하는 호시 히로야스(星弘泰)가 탈퇴하고 곧바로 다음 6번째 싱글 《負けないで》 직후, 기타를 맡던 마치다 후미토(町田文人)와 베이스 담당 미치쿠라 코스케(道倉康介), 키보드 담당 이케자와 기미타카(池澤公隆)가 탈퇴를 선언한 것으로 추측된다. </div>
    <button id="clkBtn">더보기</button>
    <script>
    let clkBtn=document.getElementById("clkBtn");
    let sI=0;
    clkBtn.onclick = function() {
    var myPara = document.getElementById("myPara");
    if(sI%2==0) {
    myPara.style.width = "95%";
    clkBtn.innerHTML = "줄이기"; }
    else {
    myPara.style.width = "100px";
    clkBtn.innerHTML = "더보기";
    }
    sI++;
    }
    </script>

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83946
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24261
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
» HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7257
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3