Frontend/HTML & CSS

[HTML] Forms

Deeb 2022. 4. 4. 23:14

1. <form>

폼은 정보를 입력하는 영역입니다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용합니다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송합니다.

 

  1. 웹 페이지에 있는 form에 데이터를 입력합니다.
  2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동하게 됩니다.
  3. 웹 서버는 데이터를 처리하기 위해 APP을 호출합니다. 이때 APP은 물리적으로 별도의 서버일 수도 있습니다.
  4. 필요에 따라 APP은 DB로 데이터를 전송합니다. 이때 DB는 물리적으로 별도의 서버일 수도 있습니다.
  5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.
  6. 웹 서버는 받은 결과를 Client 브라우저에게 보냅니다.
  7. 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여줍니다.

속성

action 입력 값을 전송할 페이지를 나타냅니다.
method 폼의 데이터를 전송할 방법을 정의합니다. method의 속성에는 get과 post가 있습니다. get은 웹 서버에 데이터를 요청할 때 사용하며, 주소에 데이터를 입력하는 방식이고, post는 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 등 사용됩니다. 또 한, 주소에 입력 내용이 나타나지 않도록 합니다.

 

 

2. <input>

input은 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력을 받습니다.

input의 속성은 아래 표와 같이 이루어져 있습니다.

 

 

거의 99% <label>태그와 함께 사용해야한다.  

input 태그들의 type 속성을 구분해주는 이유는 

모바일에서 선택했을 때 가상키보드의 모양이 다르다. 

예를 들어 전화번호을 입력해야하는데 type="text"로만 해둔다면 사용자가 직접 문자 키보드에서 숫자로 변경해야한다. 

 

속성 종류

text 입력한 text를 그대로 표현해주는 input
button 누를 수 있는 간단한 버튼을 만드는 input
password 마스크 처리된 text input
search 검색 창으로 사용할 수 있는 input
date 날짜를 입력할 때 사용할 수 있는 input
time 시간을 입력할 때 사용할 수 있는 input
range 슬라이드 바 형식의 input
number 수를 선택할 수 있게 하는 input
color 색을 선택할 수 있는 input
radio 선택 항목 중 하나만 선택 가능한 input
checkbox 선택 항목 중 0개 이상 선택 가능한 input
file 파일을 업로드 할 수 있는 input
email 이메일 주소를 입력하게  하는 input
url 웹페이지 주소를 입력하게 하는 input
tel 전화번호를 입력하게 하는 input

 

Input 태그에서 name을 써야하는 이유가  서버에 보내기위해서였던것같은데, radio checkbox는 name값을 통일시켜주어야한다 .

 

type은 올바른 데이터 입력을 요구하기위해 id는 label과 연결하기 위해 name은 서버전송할때 key값으로 주기위한것이다. 

 

name: 서버전송할때 사용자가 입력한 값을 명명

value: 서버전송할때 사용자가 입력한 값 (미리 정해줌)

 

 

3. <label>

단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 <label> 요소를 사용하도록 합시다.

 

  1. 텍스트의 설명과 폼 입력 모두를 포함하는 방식
  2. 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

for 속성

for 속성은 레이블이 속한 input 과 같은 폼 컨트롤(input, select, textarea 와 같은 요소들)을 의미합니다. 위의 예시에서도 알 수 있듯, for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 합니다. 레이블과 폼 컨트롤이 연결되면 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동합니다. 이러한 점 때문에 사용자는 클릭 할 수 있는 영역이 더 넓어져 폼을 쉽게 사용할 수 있게 됩니다.

 

 

4. <select>

value라는 속성은 post로 전달하는 값

4.1 <select>의 속성들

multiple 속성 - ctrl만 누르면 여러개를 선택할 수 있고 multiple="multiple" 속성명과 값이 같기에 생략할 수 있다. 

size : size 속성을 통해 드롭다운 리스트에서 한번에 보여줄 수 있는 option의 갯수를 조절할 수 있습니다.

 

4.2 <option>의 속성들

value : <option> 요소는 value 속성을 사용하여 선택값에 따라 서버에 어떠한 값을 전송할지 설정할 수 있습니다

selected : selected 속성은 페이지가 로딩되고 난 뒤 기본으로 선택되는 옵션을 나타내는데 사용합니다. selected 옵션을 사용하지 않으면 첫번째 <option> 이 페이지 로드 시 선택되고, 아무것도 선택하지 않고 데이터를 서버로 전송하면 첫번째 <option> 값의 value 가 전송됩니다.

 

 

응용) multiple 속성을 넣고 selected 두 개를 한다면 두 개다 선택이 가능해진다. 

선택하지 않았을 때 전송이 되지 않게 하는 법!!

<label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
<select name="device" id="myDevice" required>
    <option value="">선택</option>
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
</select>

제출되는 값에서 선택이없으면 맨위 값이 전달되기때문에 저렇게 선택으로 해준다

값 전달안되고 입력하라고 문구가 떠요

 

 

5. <fieldset>

fieldset 요소를 사용하면 그 자식 요소로 사용되는 폼 컨트롤들을 그룹화 할 수 있습니다. 특히 폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용하게 사용됩니다. 브라우저가 기본적으로 구현하는 스타일을 보시면 그 의미가 더 명확합니다.

legend 필드셋의 제목으로 제목인만큼 fieldset의 자식

 

그룹화 하는 것으로 section과 같은 역할을 한다. 

 

 

6. <legend>

<legend> 요소는 <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목을 의미합니다. 반드시 <fieldset>의 첫번째 자식으로 사용해야합니다.

 

 

7. <button>

type 종류

  • submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다. 때문에 form 양식을 제출하기 위한 용도가 아니라면 반드시 type을 선언해줍시다.
  • reset: <input type="reset">처럼, form의 모든 값을 초기화시킵니다.
  • button: 클릭 가능한 버튼입니다. 사용자가 기능을 부여하기 전까지는 별 다른 작동을 하지 않습니다.

 

form 바깥에 있으면 어떻게 되나요?

안된다! 만약 form이 여러개있는 경우 한번에 제출되어버린다.

 

<form action="" id="outBtn">
　<input type="text">
</form>
<button form="outBtn">제출</button>

이런식으로 버튼에 form속성을 지정해주면 된다 .

 

Input vs button 무엇을 써야할까?

<button> 요소는 <input>(<https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input>) 요소보다 스타일을 적용하기 훨씬 수월합니다. <input>은 닫는 태그가 없기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없지만, <button>은 내부에 여러가지 자식 컨텐츠를 추가할 수 있고 여기 더해 ::after와 ::before 와 같은 가상 요소를 사용하는 것도 가능합니다. 더 다채롭고 멋진 스타일을 적용해야 한다면 <button> 요소를 우선적으로 고려해 보는것이 좋습니다.

 

8. textarea

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

<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>
  1. cols(열) : textarea가 보여줄 입력창의 넓이입니다.  문자의 평균적인 넓이를 기준으로 하기에 문자들의 평균 크기를 기준으로 되어있다.  양수 값만 사용할 수 있으며 기본값은 20입니다.
  2. rows(행) : textarea 입력 창이 기본적으로 보여줄 입력 줄 수를 의미합니다.

 

 

 한글과 영어가 들어갈 수 있는 개수의 차이가 나는 것이다. 그리고 또 폰트마다 다르다.

 

약관에 textarea를 써야하나?

overflow: scroll;

 

 

약관같이 고지만 해주는 사항은 굳이 textarea보다 p나 pre로 쓰고 css에서 스크롤 효과를 내주면 된다. 

 

그렇다면 언제 사용하면 좋을까?

데이터전송을 위해서 사용

 

9. <datalist>

<datalist>는 <select>와 <input> 을 섞어서 사용할 수 있도록합니다. <input> 의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용합니다.

사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자 가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공합니다.

 

 

자동 필터링

 

autocomplete="off"

 

 

 

자주 사용되는 속성

  • checked : 체크상태 표시
  • required : 필수값
  • min : 최솟값
  • max : 최댓값
  • value : 입력된 값
  • placeholder : 입력값 힌트
  • minlength : 최소 길이
  • maxlength : 최대 길이
반응형
저작자표시 변경금지