3. 입력양식태그

학습목표 

입력 양식별 특징을 이해하고 용도에 맞게 사용할 수 있습니다.

블록 형식과 인라인 형식을 구분할 수 있습니다.

 

 

 

입력 양식 태그는 사용자에게 정보를 입력받는 요소입니다. 입력 양식 태그를 통해 회원가입, 로그인, 검색 등 다양한 입력 양식을 만들 수 있습니다.

이 태그를 공부할 때에는 프론트엔드뿐만 아니라 백엔드(서버쪽 코드)쪽도 고려를 해야합니다. 입력양식태그는 전달받은 클라이언트(사용자)의 정보를 서버로 전송하기 위한 태그이기 때문에 관련된 정보를 알아두는 것이 필수적입니다.

 

입력양식 태그에는 form, input, textarea 등이 있는데 input, textarea등의 태그들은 사용자가 정보를 입력할 수 있는 양식을 제공하고 그 양식을 통해 받은 정보를 저장합니다. 여기서 입력양식태그에 입력된 정보를 서버에 전송하는데 사용하는 것이 form태그입니다. 그렇기 때문에 input태그,textarea등의 입력양식태그는 꼭 form태그에 감싸져 있어야합니다.

form태그 밖에서 input을 전송해주는 form속성

출처:

http://www.tcpschool.com/html-tag-attrs/input-form

 

<input form="form id">

 

1.<form></form>

form태그는 온라인에서 form은 웹 페이지로 정보를 입력하는 영역입니다. form태그는 태그 내부에 있는 정보들을 모두 한번에 서버로 전송합니다. 

서버에 데이터를 전송하기 위해서는 그 데이터의 전송위치와 전송방식이 정해져 있어야 합니다. form태그에서는 action으로  전송위치를 표시하고 method로 전송방식을 보여줍니다. 그러므로 form태그에서는 action속성과 method 속성이 필수적입니다.

 

<form action="전송위치" method="전송방식">
</form>

1) action속성

 

2)method속성

method속성은 get과 post 방식 두 가지로 나누어져 있습니다. get방식은 도메인 자체에 변형이 나타납니다.

-get방식은 도메인에 데이터를 입력해서 전달한다.

아래의 이미지로 변화한다.

-post방식은 도메인 변경 없이 비밀스럽게 데이터를 전달합니다. 

get vs post

url 끝에 데이터를 붙여서 사용하는 get방식은 데이터가 외부에 노출되어 보안에 취약합니다. 그렇기 때문에 get방식은 데이터를 읽을 때나 검색할때에 주로 이용하고 데이터를 생성, 수정, 삭제할 때는 post방식을 사용합니다.

https://www.nextree.co.kr/p8428/

 

3)name속성

폼을 식별해줍니다. form이 하나뿐이라면 상관이 없지만 두개이상이라면 필요한 태그입니다.

get방식의 method를 취했을때, name과 그 값이 url끝에 붙습니다.

 

ex. http://localhost:8080/form.jsp?name=사용자입력값

 

 

form의 속성

action	폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
method	폼을 서버에 전송할 http메소드를 정합니다. get 또는 post, get이 기본값으로 설정되어 있습니다.
name	폼을 식별하기 위한 이름을 지정합니다.
accept-charset	폼 전송에 사용할 문자 인코딩을 지정합니다.
target	action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다. http://www.tcpschool.com/html-tag-attrs/form-target

 

 

 

 

 

 

2. <input>

input 태그는 사용자가 폼 태그에 데이터를 편하게 입력할 수 있도록 다양한 양식을 제공해줍니다. 이러한 다양한 양식을 정해주기 위해 input태그는 반드시 type속성을 가져야 합니다.

type속성의 속성값에는 text, password, file, radio, checkbox, button, submit, reset등이 있습니다. type의 속성값에 따라 입력필드가 달라집니다.

 

-type 속성

 

1) text : 한 줄의 텍스트를 입력할 수 있다. type속성의 기본값이다.

2) password : 화면에 입력받은 문자나숫자 대신 *, · 등을 대신 보여준다. 즉 비밀번호를 가려서 표시해준다.

3) file : 사용자로부터 파일을 접속받는다.

 

4) radio : 라디오 버튼, 여러 개의 option 중에서 하나의 옵션만 입력할 수 있다.

    -name

    -vlaue

    -checked

apple과 banana 중 하나만 선택함

5) checkbox : 여러 개의 옵션 중에서 다수의 옵션을 입력할 수 있다.

 

 

 

button은 value속성을 통해 입력될 속성값을 지정해주어야합니다. value 속성을 이용하면 submit, reset의 속성값을 바꾸어줄 수 있습니다.

6) button : 사용자가 누를 수 있는 버튼이다. value를 통해 버튼에  적힌 글씨를 바꾸어줄 수 있다. value속성이 작성되지 않으면 글씨가 적히지 않은 버튼이 나타난다.

 

7) submit :  사용자로부터 입력받은 데이터를 서버의 form-handler; 서버측 웹페이지로 제출하는 버튼이다.

 

8) reset : form안에 작성된 데이터 초기화 혹은 삭제

 

 

input태그에 들어가는 type속성의 속성값

button		클릭할 수 있는 버튼을 정의함.
checkbox		체크박스(checkbox)를 정의함.
color		색을 선택할 수 있는 입력 필드(color picker)를 정의함.
date		날짜를 선택할 수 있는 입력 필드를 정의함. (year, month, day)
datetime-local		날짜와 시간을 선택할 수 있는 입력 필드를 정의함. (year, month, day, hour, minute)
email		이메일 주소를 입력할 수 있는 입력 필드를 정의함.
file		업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의함.
hidden		사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함.
image		제출 버튼(submit button)으로 사용될 이미지를 정의함.
month		날짜를 선택할 수 있는 입력 필드를 정의함. (year, month)
number		숫자를 입력할 수 있는 입력 필드를 정의함.
password		비밀번호를 입력할 수 있는 입력 필드를 정의함.
radio		라디오 버튼(radio button)을 정의함.
range		슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의함.
reset		리셋 버튼(reset button)을 정의함.
search		검색어를 입력할 수 있는 텍스트 필드를 정의함.
submit		제출 버튼(submit button)을 정의함.
tel		전화번호를 입력할 수 있는 입력 필드를 정의함.
text		type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의함.
time		시간을 선택할 수 있는 입력 필드를 정의함. (hour, minute)
url		URL 주소를 입력할 수 있는 입력 필드를 정의함.
week		날짜를 선택할 수 있는 입력 필드를 정의함. (year, week)

 

- name 속성

또, type의 속성값이 submit이나 reset을 제외하면 input태그는 name속성을 반드시 가져야 합니다. name은 앞서 form태그에서도 봤던 속성 이름인데요. 이러한 name속성은 서버로 전달되는 입력값의 이름을 구분해주기 위해 쓰입니다. (변수이름이라고 생각해도 편하다.)

 

 

 

3. label태그를 통해 input태그에 자동 포커스 가게 만들기

label태그 안에 table요소는 집어넣기 어렵다. 따라서 label 태그 안에 for속성을 넣어 id를 불러왔다.

 

label태그의 속성

for		요소 id	라벨(label)과 결합될 요소를 명시함.
form		form id	라벨과 결합될 하나 이상의 <form> 요소를 명시함.

 

 

 

 

 

4. <textarea> </textarea>

:여러 행의 글자를 입력할 때 사용하는 태그

name rows cols

<form>
    <textarea name="message" rows="5" cols="30">여기에 적으세요.</textarea>
</form>

 

공백없이 바로 입력하고 싶을 때에는 <text태그에 [tab]을 누르지 않고 바로 입력하면 된다.

textarea 태그안의 요소는 태그와 붙여쓰는 것이 좋다.

 

 

5. <select></select>

optgroup은 선택되지않는 제목을 말한다. option은 기본적으로 하나만 선택된다.

    <select>
        <optgroup label="커피(Coffee)">
            <option value="americano">아메리카노</option>
            <option value="caffe latte">카페라떼</option>
            <option value="espresso">에스프레소</option>
        </optgroup>
    </select>

여러 항목 선택하기

multiple속성을 사용하면 여러항목을 선택할 수 있다.

multiple="multiple" 이 정석이지만 생략할 수 있다.

    <form action="/examples/media/action_target.php" method="get" id="myForm">
        <select name="order[]" multiple>
            <option value="americano">아메리카노</option>
            <option value="caffe latte">카페라테</option>
            <option value="cafe au lait">카페오레</option>
            <option value="espresso">에스프레소</option>
        </select><br>
        <input type="submit">
    </form>

 

 

6.fieldset태그, legend 태그

fieldset태그는 form요소 안의 태그들을 하나로 묶어주는 역할을 합니다.(그룹화를 가시적으로 보여줌) legend태그는 fieldset 안에 있는 입력양식의 필드제목을 명시해주는 태그입니다. legend태그는 fieldset태그 없이 사용할 수 없습니다.