HTML - Forms

김석환·2020년 10월 11일
2

HTML

목록 보기
8/8
post-thumbnail

1.form

form 태그는 사용자가 입력한 데이터를 받기위해 사용되며 input , textares , button , select , checkbox , radio button , submit button 등의 입력 양식 태그가 포함된다.

  • action - 입력 데이터가 전송될 URL 지정
  • method - 입력 데이터 전달 방식 지정
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
        ID: <input type="text" name="id" value=""><br>
        username: <input type="text" name="username" value="KIM"><br>
        <input type="submit" value="Submit">
    </form>
</html>

submit button 클릭되면 input태그에 입력된 데이터가 form태그의 method 속성에 지정된 방식으로 action 속성에 지정된 서버에 전달된다.

2.input

input 태그는 form태그중 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다. 여러종류가 있는데 type속성에 의해 구분된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>button</h3>
    <input type="button" value="Click me" onclick="alert('Hello world!')">
    <hr>

    <h3>checkbox</h3>
    <input type="checkbox" name="fruit1" value="apple" checked>사과<br>
    <input type="checkbox" name="fruit2" value="grape"> 포도<br>
    <input type="checkbox" name="fruit3" value="peach"> 복숭아<br>
    <hr>

    <h3>color</h3>
    <input type="color" name="mycolor">
    <hr>

    <h3>date</h3>
    <input type="date" name="birthday">
    <hr>

    <h3>datetime</h3>
    <input type="datetime" name="birthdaytime">
    <hr>

    <h3>datetime-local</h3>
    <input type="datetime-local" name="birthdaytime">
    <hr>

    <h3>email</h3>
    <input type="email" name="useremail">
    <hr>

    <h3>file</h3>
    <input type="file" name="myfile">
    <hr>

    <h3>hidden</h3>
    <input type="hidden" name="country" value="Norway">
    hidden filed는 사용자에 표시되지 않는다.
    <hr>

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

    <h3>month</h3>
    <input type="month" name="birthdaymonth">
    <hr>

    <h3>number</h3>
    <input type="number" name="quantity" min="2" max="10" step="2" value="2">
    <hr>

    <h3>password</h3>
    <input type="password" name="pwd">
    <hr>

    <h3>radio</h3>
    <input type="radio" name="gender" value="male" checked> 남자<br>
    <input type="radio" name="gender" value="female"> 여자<br>
    <hr>

    <h3>range</h3>
    <input type="range" name="points" min="0" max="10" step="1" value="5">
    <hr>

    <h3>reset</h3>
    <input type="reset">
    <hr>

    <h3>search</h3>
    <input type="search" name="googlesearch">
    <hr>

    <h3>tel</h3>
    <input type="tel" name="mytel">
    <hr>

    <h3>text</h3>
    <input type="text" name="myname">
    <hr>

    <h3>time</h3>
    <input type="time" name="mytime">
    <hr>

    <h3>url</h3>
    <input type="url" name="myurl">
    <hr>

    <h3>week</h3>
    <input type="week" name="week_year">
  </body>
</html>

3.select

여러 리스트에서 여러개의 아이템을 선택할때 사용한다.
서버에 전송되는 데이터는 select요소의 name속성을 키로 option요소의 value 속성을 값으로 하여 key = value의 형태로 전송된다.

  • select - select form 생성
  • option - option 생성
  • optgroup - option을 그룹화한다.
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
    </head>
    <body>
       <select name="fruit">
           <option value="orange" selected>orange</option>
           <option value="apple" disabled>apple</option>
           <option value="banana">banana</option>
           <option value="melon">melon</option>
         </select>
     </body>
    </html>


0개의 댓글