WeniVooks

양식(form)

1.form

• 사용자로부터 입력을 받기 위한 양식을 작성하는 태그들을 통틀어 form이라고 합니다.

  • 🙋 꼭 form 태그로 묶어 주어야 하나요?

    form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다.

• ex) 단순히 입력받은 값을 화면에 뿌려주는 용도일 경우

1.1 method 속성

• 양식을 제출할 때 사용할 HTTP 메서드

Get 메서드

<form method="get" action="http://naver.com">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name" />
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age" />
  </div>
  <button type="submit">버튼</button>
</form>

<form method="get" action="http://naver.com">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name" />
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age" />
  </div>
  <button type="submit">버튼</button>
</form>

• https://example.com**?name=홍길동&age=20**
• 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송.
• GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
• 보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음(URL 길이제한은 브라우저마다 다름)
• 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청

Post 메서드

• 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식.
• 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음.
• POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송
• 데이터의 길이제한이 없고, GET 방식보다 보안성이 높음.
• enctype 속성
  • text/plain : 디버깅용 및 단순 텍스트 전송, 개발용으로만 사용 권장
  • application/x-www-form-urlencoded: 기본값
  • multipart/form-data: <input type="file">이 존재하는 경우 사용

    <form action="http://localhost:8000/"
    method="post"
    enctype="multipart/form-data"
    >
      <input type="text" name="myTextField">
      <input type="checkbox" name="myCheckBox">Check</input>
      <input type="file" name="myFile">
      <button>Send the file</button>
    </form>

    <form action="http://localhost:8000/"
    method="post"
    enctype="multipart/form-data"
    >
      <input type="text" name="myTextField">
      <input type="checkbox" name="myCheckBox">Check</input>
      <input type="file" name="myFile">
      <button>Send the file</button>
    </form>

1.2 action 속성

• 양식 데이터를 처리할 프로그램의 URL을 적어줍니다.
• 데이터를 어디로 보낼것인지 지정합니다. 이 값은 반드시 유효한 URL 이어야 합니다.
• 이 속성을 지정하지 않으면 데이터는 form이 있는 페이지의 URL로 보내집니다.

1.3 autocomplete 속성

• 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄.

• 이전에 해당 양식의 입력된 값이 있을 경우(브라우저에 기록이 남아있을 경우 나타남)

• off 자동입력 X

• on 자동입력 O(기본값)

2. input

2.1 공통 속성

2.2 input 유형

<input type=”___”>

text/search

email

password

url

tel

number

button, reset, submit

• <button type=”___”> 태그와 동일한 기능을 수행합니다.

text / password / url / search / tel

• maxlength: 문자수 최대 길이
• minlength: 문자수 최소 길이

checkbox / radio

• checkbox: 단일 값을 선택하거나 선택 해제할 수 있는 체크박스

• raido: 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택

• checked: 체크 여부

file

• 파일을 지정할 수 있습니다.
• accept: 허용하는 파일 유형을 지정할 수 있습니다.
• multiple: 지정할 경우 사용자가 여러개의 파일을 선택할 수 있습니다.

number

• 숫자 입력. 화살표 컨트롤 제공
• max: 최대값
• min: 최소값
• step: 증가값

2.3 name 속성

• name 속성은 각 폼 요소에 고유한 이름을 부여합니다.
• 서버가 어떤 데이터인지 식별할 수 있게 합니다.
• 모든 input, select, textarea 요소에 필수적으로 설정됩니다.

2.4 value 속성

• value 속성은 사용자가 입력한 값이나 기본 값을 나타냅니다.
• 폼이 제출될 때, name 속성의 값과 함께 서버로 전송됩니다.
• 주로 input 요소에 사용됩니다.

name과 value 속성은 이름/값(name/value)의 짝으로 양식과 함께 전송됩니다

3. label

• 사용자 인터페이스의 항목을 나타냅니다.
• input과 함께 사용해주세요!
  • 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다.
  • label을 클릭하여 input에 포커스를 이동시키거나 활성화 시킬 수 있습니다.

for-id를 이용해 연결하기

label 안에 input 중첩하여 연결하기

4. select

옵션 메뉴를 제공합니다.

• multiple : 여러개의 항목을 동시에 선택할 수 있습니다.
• size : 한번에 노출되는 항목의 수를 조절합니다.
• required : 선택 필수
• disabled : 선택 불가

4.1 option

• 메뉴의 각 옵션을 정의합니다.
• 모든 option 은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요합니다.
  • 지정하지 않은 경우, option 내 텍스트 값으로 사용합니다.
• selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.

4.2 optgroup

• option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있습니다.

5. fieldset

• form 관련 요소들을 묶을 때 사용합니다.
• disabled 를 사용할 경우 모든 자손 컨트롤을 비활성화합니다.

5.1 legend

• 그룹의 제목을 제공합니다.

6. datalist

• 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 요소를 담을 수 있습니다.
• input과 select 기능을 합친 개념입니다.
• 사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 옵션값에 원하는 값이 없을 경우 사용자가 다른 값을 입력할 수 있도록 합니다.

7. textarea

• 여러줄의 text를 입력받을 수 있습니다.

7.1 text 속성

• cols: 입력창의 너비. 문자의 평균적인 넓이를 기준으로 합니다.
• rows: 기본적으로 보여줄 입력 줄 수 를 의미합니다.
• maxlength: 사용자가 입력할 수 있는 문자 최대 길이입니다.
• minlength: 사용자가 입력해야 할 문자 최소 길이입니다.
• placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

• 하단 우측의 시각적 레이블과 <label> 태그로 입력박스가 50자 이내 글자 수 제한이 있음을 정보 안내하고 있어 스크린리더 사용자가 글자 수 제한이 있다는 정보를 입력 전에 알 수 있습니다.

8. button

• 사용자가 클릭할수 있는 요소입니다.
• form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다.

8.1 button의 타입

• button: 기본 행동이 없습니다. 클릭했을 때 아무것도 하지 않습니다. JavaScript와 연결하여 사용합니다
  • <button>의 기본타입 입니다.
  • 양식 제출용이 아니라면 타입을 꼭 button으로 지정해주세요!
• submit: 서버로 양식 데이터를 제출합니다.
  • <form> 태그 내부에 위치해있는 <button>의 기본 타입은 submit 입니다.
• reset: <input type="reset"> 과 동일하게 초깃값으로 되돌립니다.

• disabled: 누르거나 클릭하는 것을 막습니다.
  • ex) 필수 입력정보를 다 입력하지 않았을 땐 disabled, 입력한 후 해제 처리

<a> vs <button> 두개는 어떤 차이가 있을까요?

• a vs button 오른쪽 마우스 클릭, shift + click, cmd + click 마우스오버, 포커스가 되었을 때 url 브라우저 창 하단에 노출된다

  	a	button
  역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
  기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본동작 없음. JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
  키보드	엔터	스페이스, 엔터
  주의	href 값 없이 JS로 동작하게 하면 안됨!	JS로 동작

• 아래 그림대로 만들어보기!