HTML Forms

HTML Forms

중요한 개념이니 잘 알아두도록 하자! HTML Forms는 클라이언트가 서버에게 데이터를 보낼 때 사용된다. 사용자의 입력을 받아온 뒤 서버에서 본격적으로 back-end 작업을 하게 된다.

• <form> : 사용자의 입력을 받아올 form을 만들때 쓰이는 element이다
• <input> : form에서 가장 중요한 element이다. 형식은 <input type="text"> 인데, type 다음으로 뭐가 나오는지에 따라 다양하게 쓰인다.
  • id: id라는 속성은 css를 이용해 스타일을 매길 때 사용할 수 있고, javascript를 통해서 유효성 검사를 하고자 랄 때에도 사용될 수 있다.
  • value: default 값을 지정해주는 속성이다.
    예) <input type="text" value="Harry"> 의 경우에는 textbox 상자 안에 "Harry" 라는 이름이 defualt으로 적혀있다.

Type	기능
<input type="text">	입력할 하나의 글 상자(textbox)를 보여준다
<input type="radio">	선택지 리스트를 보여준다 (multiple choice 처럼) 객관신 문제에서 하나의 답안을 선택하도록 만들고 싶을 때 사용한다
<input type="submit">	submit이라는 버튼을 누르면 form에 입력된 값들이 action page으로 전달된다

• <label> : label 태그의 for attribute와 input 태그의 id attribute 값은 같아야 함께 묶인다.
• <radio> : Multiple choice 리스트를 보여줘서 사용자가 선택할 수 있도록 한다

label 표시가 되어 있는 radio 선택지

label 표시가 되어 있는 않은 radio 선택지

• <submit> : form에 있는 데이타를 form-handler에게 전송하는 버튼이다.
  • form-handler: 사용자가 입력한 데이터를 처리하기 위한 server-side script를 가지고 있는 페이지다.

<form action="hw2_1_form.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="길동"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="홍"><br><br>
        <input type="submit" value="Submit">
</form>
<!-------------------------------------------------------------------->

<!--hw2_1_form.php-->
Form is working!

Submit 버튼을 누르면 hw2_1_form.php 페이지로 전송되서 php 파일에 있던 내용이 나타나는 것을 확인 할 수 있다

• action : form이 제출 될 때에 어떤 작업이 이뤄지는지 정의한다, form의 데이터 값을 전달할 페이지를 의미한다.
• target : 제출된 창이 어떤 창에서 열릴건지 정의한다
  • default target은 _self이다 (현재 창에서 열린다는 뜻)
  • target에는 _self, _blank, _parent, _top 등이 있다
• method : form 데이터가 제출 될 때 어떤 HTTP 형식으로 제출될 건지를 말한다. *url 주소를 주목해서 보자
• GET 방식과 POST 방식은 사용하는 용도에 따라 각 메소드의 특성이 장점이 될 수도 있고, 단점이 될 수도 있다. 무엇이 더 좋고 나쁜지를 따지지 말도록 하자. 용도에 따라 적절히 사용하도록!
  
  1. GET: url 주소에 사용자가 입력한 data가 그대로 뒤에 덧붙여져서 보내지는 방식이기 때문에 입력 결과가 그대로 보인다
     • 예시) 구글 검색, 방문기록을 남기고 싶을때
     • 변수이름=값&변수이름=값& .... : 이런 형식으로 파라미터와 value가 "&"으로 연결 되어 url 주소에 나타나게 된다.
     • 장점: 내가 원하는 url을 만들어낼 수 있다
     • 단점: 사용자의 id또는 비밀번호를 입력하는 경우 url 주소에 정보가 그대로 드러나기 때문에 보안상으로는 취약할 수 있다
  2. POST: GET 과 달리 url 주소에 입력 결과가 보이지 않는 방식이다, 따라서 보안이 강화된 형태이다.
     • 예시) 로그인 할 때 id와 비밀번호를 입력할 때
     • 장점: url 주소에 입력 결과가 보이지 않기 때문에 가릴 수 있다(보안성으로 더 뛰어나다)
     • 단점: 숨겨져 있기 때문에 뭘 보내는지 알아낼 수 없다
     • 데이터의 양이 많아질 경우에는 POST 방식으로 보낼 수 밖에 없다  

<form action="hw2_1_form.php" target="_blank" method="get">

• ✨name✨ :
  • form 태그에 쓰일 경우는 form의 이름을 의미한다. Javascript를 이용해서 validation을 하고자 할 때 form 이름으로 접근하게 되기 때문에 매우 중요한 속성이다.
  • input 태그에 쓰일 경우에는 파라미터 변수의 이름이 되기 때문에 php를 통해 입력 받은 값을 가공해 다시 화면에 출력할 때 쓰이기 때문에 매우 중요한 속성이다.
    
    • name은 POST/ GET  메소드로 던지는 파라미터의 변수 이름이다.
  • 모든 입력 field는 반드시 name attribute가 있어야 한다. (생략되어 있을 경우에는 입력 결과가 전송되지 않는다)

예) 아래의 경우에는 fname이 파라미터로 사용된다.

<!-- form.html-->
<input type="text" id="fname" name="fname" value="John"><br>

<!-- action 페이지 -->
fname=John&lname=Doe 

• <select> : drop-down list이다
  • <option>: 선택할 수 있는 옵션들을 의미한다
  • 기본으로 첫 번째 항목이 미리 선택 되어 있지만, 이를 바꾸고자 하면 미리 선택되었으면 하는 항목에 selected attribute를 넣으면 된다
  • size: 보이는 drop-down list의 항목 숫자를 지정할 수 있다, <select> 안에서 정의한다.
  • multiple: 한개 이상의 선택지를 선택할 수 있도록 한다, <select> 안에서 정의한다. 

<optgroup>: select element에서 관련 있는 옵션들을 묶기 위해 사용되는 태그이다.

<form action="hw2_1_form.php">
        <label for="colors">Choose a color:</label>
        <select id="colors" name="colors">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green" selected>Green</option>
            <option value="yellow">Yellow</option>
        </select>
        <input type="submit">
 </form>

• <textarea> : multi-line input field를 제공한다 (input type="text" 에서는 한 줄 입력만 받아올 수 있었다)
  • rows: 텍스트 상자에 보이는 행의 개수를 뜻한다
  • cols: 텍스트 상자에 보이는 너비를 뜻한다
  • CSS를 이용해서 텍스트 상자의 크기를 조정하는 것도 가능하다

<form action="hw2_1_form.php">
        <textarea name="message" style="width:200px; height:200px;" >The cat was playing in the garden</textarea>
        <br><br>
        <input type="submit">
 </form>

• <button>: 클릭 가능한 버튼을 제공한다
  • 사용할 때 항상 type attribute를 명시해야 한다

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

버튼을 클릭하면 다음과 같은 팝업창이 뜬다

• <fieldset> : form에서 관련된 데이터를 하나로 묶을 때 사용한다
• <legend>: fieldset element 에 대한 caption(~에 대한 설명)을 제공한다

<form action="hw2_1_form.php">
        <fieldset>
            <legend>User info:</legend>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname" value="Doe"><br><br>
            <input type="submit">
        </fieldset>
</form>

그냥 form으로 값을 받아올때

fieldset와 legend를 사용해 user info라는 하나의 그룹으로 입력 값을 받아올때

• <datalist> : input element를 위해 미리 지정된 옵션을 제공한다 (예: 어떤 프로그램에서 주어진 drop-down list에서 언어를 선택할 때)
  • input에서의 list 값과 datalist에서 id 값이 일치해야한다
• <output> : 계산 결과를 나타낸다

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

range를 사용해서 드래그해서 값을 조정할 수 있다

Input Types

형식: <input type="">

• test
• password
• submit
• image : submit 버튼 대신에 이미지를 클릭할 수 있도록 해준다
• reset
• radio (allows the user to select only one option)
• checkbox (allows the user to select no or more options)
• button
• color
• date
  • min, max (날짜 적는 형식: 2000-01-01 )
• email
  • placeholder(예시 보여주는 것), required
• file
• month
• number
  • min, max
• input restrictions
  • checked, required, value(기본 값을 명시함)
  • step(입력할 수 있는 숫자 단위를 설정한다) step="10"이면 10단위의 숫자만 입력할 수 있다
• range
  • min, max, step
• search
• tel
  • placeholder, pattern (예: pattern="010-[0-9]{4}-[0-9]{4}"), required
• time
• url
• week

Input Attributes

• value
• readonly (form을 제출할 때 입력창에 있던 값이 전송된다)
• disabled(form을 제출할 때 입력창에 있던 값이 전송 되지 않는다)

disabled 되기 이전

firstname 입력칸이 disabled 된 이후

• size: 입력창의 크기를 결정한다
  • 다음과 같은 input type에서 작용한다: text, search, tel, url, email, password
• maxlength: 입력할 수 있는 최대 글자 수 (비밀번호나 id 문자 개수에 제한 설정할 때 사용될 수 있다)
• min & max
  • 다음과 같은 input type에서 작용한다: number, range, date, datetime-local, month, time, week
• multiple

<form action="hw2_1_form.php">
        <label for="file">Select a file: </label><br>
        <input type="file" id="file" name="file" multiple><br><br>
        <input type="submit">
</form>

Ctrl 또는 Shift 키를 누르고 여러개의 파일을 선택하는 것이 가능하다

• pattern
  • 다음과 같은 input type에서 작용한다: text, date, search, url, tel, email, password
• placeholder : 입력창에서 hint(입력 형식)를 제공한다
  • 다음과 같은 input type에서 작용한다: text, search, url, tel, email, passsword
• required
• step
• autofocus
• height & width: <input type="image"> 에서 쓰인다
• list

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

• autocomplete

The form attribute

• form: <form>에서 id를 설정해준 후에 form 밖에서도 form id를 사용해서 form에 속해있도록 만들 수 있다
• formaction: submit 안에서 설정해 다른 php 페이지로 이동하도록 만들 수 있다
• formenctype: 데이터를 어떻게 인코딩해서 보낼지 설정해준다
  • POST method을 사용하는 form만 해당
  • submit, image에서 작동한다
• formmethod: submit 버튼을 누를 때 GET 또는 POST 방식으로 보내줄지 지정해준다
  • submit, image에서 작동한다
• formtarget
• formnovalidate
  • input 에 required가 있어도 formnovalidate으로 제출하면 입력창을 꼭 채우지 않고 제출하는게 가능하다
• novalidate
  • <form> 안에서 적용한다