[html/css] 입력 양식 태그

입력 양식 태그

입력 양식 태그는 사용자로부터 정보를 얻고자 할 때 사용하는 태그를 말한다.

회원가입이나 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문시 내용을 작성하여 보내는 것과 같은 것들이 입력 양식에 해당한다.

기본적으로 form 태그를 바탕으로 form 태그 내부에 다양한 입력 태그들을 활용해 사용한다.

입력 양식 태그
form	입력 양식 지정을 위한 최상위 기본 태그.
input	여러 유형의 입력 양식을 지정하는 태그.
label	입력 양식과 연결되는 텍스트 라벨.
fieldset	입력 양식들을 그룹으로 묶어주는 태그.
legend	fieldset의 제목을 표시하는 태그.
button	입력 버튼을 생성하는 태그.
select	드롭 다운 박스로 목록 중에서 선택할 수 있는 양식 태그.
optgroup	select 안에서 목록을 그룹화 하는 태그.
option	select의 선택 항목을 지정하는 태그.
textarea	여러 라인에 걸친 프리 포맷 입력 양식.

 

---

<form> 태그

form 태그는 입력 양식의 최상위 요소로 다른 입력 양식들을 포함한다. 

지정한 입력양식과 처리방식을 통해 사용자로부터 정보를 입력받고 그 내용을 서버로 넘긴다. 

form 내부의 다양한 입력 양식 태그들을 공부 하기 전에 form 태그가 가진 속성들을 먼저 알아보겠다.

/* 기본형 */
<form method="서버로 보내는 방식" action="서버주소" name="폼태그 이름" target="창 여는 방식"></form>

form 태그 속성
method	사용자가 입력한 정보를 서버로 보내는 방식을 지정한다.
get : 데이터를 256 ~ 4,096 byte 까지만 서버로 보낼 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 보여지기 때문에 보안에 취약하다는 단점이 있다.    post : 입력한 내용의 길이에 제한 받지 않고 사용자가 입력한 내용도 드러나지 않기 때문에 대부분 post 방식을 사용한다. dialog : 입력이 연결된 대화 상자를 닫고 양식 테이터를 전혀 전송하지 않음을 나타내는데 사용되는 속성이다. <input type="submit"> 및 <button>요소에서도 사용할 수 있다.
name	form의 이름을 지정한다.  필수로 넣는 속성은 아니지만 한 html 안에 form 태그가 여러개일 경우 구분하는 용도로 사용한다.  javascript로 form을 제어할 때에도 사용된다.
action	form 태그 안에 입력된 정보들을 데이터를 전송할 url로 보통 서버의 프로그램과 연결되는 주소(= end point)가 들어간다.    *서버 주소는 당장에 모를때에는 #으로 비워둔다.
target	action 속성에서 지정한 스크립트 타일을 현재 창이 아닌 다른 위치에서 열도록 하는 속성이다.  +) target="blank" 와 target="_blank"의 차이(클릭)
_self : 기본값으로 현재 사용중인 페이지가 새로 수신된 데이터 양식으로 바뀐다. _blank : 새로운 창으로 데이터를 로드한다. _parent : 응답을 현재 브라우저의 부모 브라우저로 로드한다. 부모가 없는 경우, _self와 동일하게 작동한다. _top : 최상위 브라우저에 로드한다. 현재 브라우저가 최상위 브라우저인 경우 _self와 동일하게 작동한다.
autocomplete	자동완성 기능이다.  폼에 내용을 입력할 때 예전에 입력했던 내용을 자동으로 표시해 준다.  이전에 입력했던 단어와 비슷한 내용을 입력하면 자동으로 단어를 말풍선으로 표시해준다.  기본값은 ON이며, OFF로 기능을 끌 수있다.

---

<input/> 태그의 type

 

input 태그는 사용자가 정보를 입력할 수 있는 다양한 형태의 태그이다. 형태는 type 속성에 의해 결정된다.       

/* 기본형 */
<input type="속성" />

type="속성"
text	한 줄짜리 텍스트를 입력할 수 있는 입력창이다. 보통 아이디, 이름, 주소와 같은 정보를 입력할 때 사용한다.
password	비밀번호 입력창이다. 모양은 텍스트와 동일하게 생겼으나 글자를 입력하면 내용이 기호로 표현된다.
search	검색창을 나타내는 태그. 모양은 텍스트 필드와 동일하지만 글자를 입력하면 입력창 오른쪽에 X자 표시가 뜬다. X자를 누르면 검색어를 지울 수 있다.
url	인터넷 주소(url)을 입력할 수 있는 입력창이다. 잘 사용하지 않기 때문에 사용빈도가 떨어진다. url이어도 모양은 텍스트필드와 동일하다. 한글, 영어, 숫자 다 입력 가능하다. * 8보통 텍스트 필드로 제작하고 javascript로 만든다.
email	이메일을 입력할 수 있는 입력창이다. 실제로 존재하는 email인지 확인하는 것은 javascript가 할 수 있기 때문에, 브라우저에서는 at표시(@)의 유무를 1차로 확인해주는 역할만 한다. 이메일을 검사하는 시점은 form이 서버로 넘어갈 때이다.
checkbox	여러개의 항목을 체크할 때 사용한다. 사용자로부터 어떠한 동의를 얻거나 2개 이상의 항목을 체크할 때 이 checkbox를 사용한다.
radio	여러개의 항목 중 한가지를 선택할 때 사용한다. 이 타입은 모든 name 속성의 이름이 동일해야 여러 항목 중 한 가지만 선택할 수 있다.
* checkbox, radio는 value 속성을 넣어주면 각 항목에 기본값을 지정할 수 있다. value에 들어있는 값은 form을 서버로 넘길 때 같이 저장할 수 있다. 나중에 javascript로 제어 가능하다.
range	숫자 범위를 설정할 수 있는 슬라이드 막대가 나온다. min이나 max에 따로 설정값을 주지 않으면 기본값은 0과 100으로 설정되어있다. step은 증감 값으로 기본값은 1로 설정되어 있는데, 5로 설정하면 5,10,15,20 ... 로 이동한다. value는 범위에서 사용자에게 처음 보여주는 초깃값을 말한다.
max="최댓값"    min="최솟값"   step="증감"    value="초깃값"
number	숫자 입력 필드를 말한다. 보통 쇼핑몰과 같은 수량을 체크해야하는 사이트에서 많이 사용된다. min, max, step, value 속성값과 함께 사용된다.
date, month, week	웹 문서나 어플에 달력을 넣고자 할 때 사용된다. date는 연도/월/일로 달력에 표시되고 month는 연도와 월을 입력할 수 있다. week는 연도와 주를 입력할 수 있다.
date:yyyy-mm-dd    month: yyyy-mm    week:1월 첫째주 기준으로 몇번째 주인지 표시
time, datetime. datetime-local	time은 입력 폼에서 오전/오후 시/분을 나타낸다. datetime, datetime-local은 사용자가 웹 문서를 보고 있는 당시의 날짜와 시간을 보여준다. * 크롬에서는 text 필드처럼 나와서 datetime-local을 많이 쓴다. * date-local에서는 범위 설정이 안된다.
** 달력과 시간입력 필드는 웹 브라우저마다 모양이 다르게 나타나는데, 항목이 3가지로 구분된다는 점은 동일하다. ** 시간과 날짜는 min, max, step 으로 기간을 지정할 수 있다.
submit reset	submit은 전송버튼을 의미하며, action에 쓰여진 서버 주소로 내용을 전송한다. reset은 초기화 버튼을 의미하며 사용자가 입력한 내용들을 초기화 할 때 사용한다. submit 버튼과  reset 버튼에 value 속성을 이용해 버튼의 이름을 바꿀 수 있다.
image	type="image" src="이미지경로" alt="이미지설명" submit 버튼과 같은 기능을 하는데 image인 버튼이다.  *이때 사용되는 image는 서버로 내용을 전송하는 버튼이다. 만약 단순히 링크를 연결하고 싶은 거라면, div에 a태그를 넣어 사용하는것이 올바르다.
button	type="button" value="이름" 아무런 기능이 없는 깡통 버튼이다. 버튼 형태만 나타나며 value 속성을 사용해서 이름을 정해준다. javascript로 기능을 넣을 때 많이 사용한다. ** 속성말고 태그로도 button이 존재한다.
file	type="file" accept="첨부파일유형(예시: image/jpg, image/*)" 폼에서 사진이나 문서를 첨부할 때 사용하는 기능이다. 웹브라우저 화면에서 [파일선택]이나 [찾아보기]같은 버튼 형태로 나타난다. file 의 종류나 내용도 설정이 가능하다.
hidden	type="hidden" name="이름" value=" 서버로 넘길 값" 히든 필드는 브라우저 화면에선 보이지 않지만, 사용자가 폼 양식을 입력하면 폼과 함께 서버로 전송되는 요소를 말한다. 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 히든필드로 입력한다.

 

텍스트를 입력할 수 있는 입력창 

<form>
    <label for="user_name"> 이름 
    <input type="text" id="user_name" name="user_name" />
    </label>
</form>

<input/> 태그의 주요 속성

input 태그의 주요 속성
autofocus	페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다. 입력 요소 중 텍스트를 입력할 수 있는 양식에 autofocus를 사용하면 입력 커서가 깜빡이면서 텍스트를 바로 입력할 수 있게 해준다. 숨겨진 입력 창은 초점을 맞출 수 없으므로 그 유형에는 속성을 사용할 수 없다. autofocus를 사용할 때에는 접근성을 신중하게 고려해야 하는데, 자동으로 초점을 맞추면 로드 시 페이지가 스크롤 될 수 있고, 동적 키보드가 일부 장치에서는 자동으로 표시되어 시야에 방해를 줄 수 있다. 오토포커스를 사용하면 화면 판독기가 미리 경고 하지 않고 지정된 양식으로 텔레포트 하기 때문에 화면 판독 기술을 사용하는 사람들에게 혼동을 줄 수 있다.
required	필수 입력란을 지정하는 태그이다. 이 속성이 들어있는 input은 반드시 입력을 해야만 폼 양식이 서버로 전송된다.
placeholder	사용자가 텍스트를 입력할 때 입력란에 안내문구를 표시하는 태그이다. 설명 내용은 간단한 문장 혹은 단어여야 하고, 엔터 혹은 줄바꿈이 포함되지 않아야 한다.   플레이스홀더는 화면 판독기가 엑세스 할 수 없을 뿐만 아니라 사용자가 텍스트를 입력하거나 양식 컨트롤에 이미 값이 있는 경우 사라진다는 특징이 있다. 자동 페이지 번역 기능이 있는 브라우저는 번역할 때 속성을 건너 뛸 수 있으며, 이는 번역되지 않을 수 있다는 것을 말한다. 그렇기 때문에 피할 수 있는 경우 플레이스홀더 특성을 사용하는 것보다 label을 사용하는 것이 좋다.
read-only	읽기 전용이라는 속성 태그이다.  readonly를 적용하면 사용자는 텍스트를 입력할 수 없고 읽기만 가능하다.

 

참고 1) mdn web docs

<input>: 입력(양식 입력) 요소 - HTML: HyperText Markup Language | 증권 시세 표시기 (mozilla.org)

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

 

참고 2) 페이지의 상태 선택자 참고

[html/css] 선택자 뿌수기!!(후손선택자 / 자손선택자 / 동위선택자 / 속성선택자 / 반응선택자 / 구조선택자 / 형태구조선택자 / 상태선택자 / 시작문자선택자 / 가상요소 선택자) :: Yeri (tistory.com)

[html/css] 선택자 뿌수기!!(후손선택자 / 자손선택자 / 동위선택자 / 속성선택자 / 반응선택자 / 구

 

 

---

<label> 태그

inline 속성으로, 폼 요소에 이름을 붙이는 태그이다.

사용자가 어떤 내용을 입력할지 쉽게 알아볼 수 있도록 해주고, 선택 범위를 넓혀 사용자의 편리성을 높힌다.

나아가 폼 요소와 해당 이름을 연결해주고 나중에 javascript를 통해 해당 폼 요소를 제어할 수 있도록 도와주는 태그이다.

 

작성 방식은 아래와 같이 암시적 작성 방식과 명시적 작성방식이 있는데, 보통 명시적 작성 방식을 많이 사용한다.

그 이유는 몇몇 오래된 기기들은 암시적 방식을 인식 못하기 때문이라고 한다.

 

암시적 방식일 경우, label 안에 input 이 들어가 있기 때문에 부모 자식 요소로 자동으로 그룹으로 인식하

명시적 방식의 경우, 각각의 떨어진 태그이기 때문에 for와 id에 같은 이름을 적어서 같은 그룹으로 인식하는 것이다.

/* 암시적 작성 방식 : 라벨안에 input을 넣는 경우 */
<label for="폼요소 이름">내용<input type="" id="폼요소 이름" name="폼요소 이름"/></label>

/* 명시적 작성 방식 : 라벨 바깥에 input을 넣는 경우 */ 
<label for="폼요소 이름">내용</label>
<input type="" id="폼요소 이름" name="폼요소 이름"/>

 

실제로 적용할 때는 아래와 같이 작성한다. 

<!-- 암시적 작성 방식 -->
<label for="user_name">이름
	<input type="text" id="user_name"/>
</label>
<!-- 명시적 작성 방식 방식 -->
<label for="user_age">나이</label>
<input type="text" id="user_age" />

---

구역을 나누는 태그
<fieldset>, <legend>

 

 

 

하나의 form에서 여러 구역을 나누어 표시할 때 사용하는 태그로 block 속성이다.

배송지 정보와 수취인 정보같은 내용을 나누어 표시할 때 사용한다.

/* 기본형 */
<fieldset>
	<legend></legend>
</fieldset>

    <form action="#" method="post" autocomplete="on" name="member">
      <fieldset>
        <legend>배송지 주소</legend>
      </fieldset>
    </form>

---

<button>

버튼을 만드는 태그.<input type="submit"> 이나 "button", "reset"과 같은 역할을 하고 모양도 똑같다.       

하지만 input보다는 button태그를 일반적으로 제일 많이 사용한다.        

button 태그는 일반 태그로, 태그 안에 이미지도 넣을 수 있고 스타일도 다양하게 지정할 수 있어 많이 사용한다.       

기본값은 submit 이고, 사용할 때 반드시 form 태그 안에 들어가 있어야 작동한다.

속성 값
submit	서버로 폼 안의 정보를 넘긴다.
reset	사용자가 입력한 내용을 초기화 한다.
button	기능없는 깡통 버튼이다. javascript로 후에 기능을 넣는 경우가 많다.

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C

[CSS] 🎨 버튼(Button) 디자인 스타일 모음

 

 

---

<select>, <option>

드롭다운 목록을 만들 때 쓰는 태그이다. '셀렉트 박스'라고도 부른다.       

사용자가 내용을 입력하지 않고 옵션 중 항목을 선택하게 하는 태그로, 쇼핑몰 같은 곳에서 많이 사용한다.        드롭다운 목록은 select태그에 option 태그를 넣어서 항목을 지정할 수 있다.

속성 값
size	화면에 표시할 드롭다운 항목의 개수를 지정한다.
multiple	다중 선택 드롭 다운 목록을 만들 때 select 태그에 지정한다. 펼쳐진 상태로 보여주고, shift를 누르면 다중선택이 된다.
selected	드롭다운 메뉴에서 먼저 보여주고 싶은 항목에 지정한다. 해당 옵션이 먼저 선택되어 보여진다.
value	해당 항목을 서버로 넘길 때 저장할 값을 지정한다.
** size 와 multiple 은 잘 사용하지 않는 편이다.

---

<textarea>

폼에서 텍스트를 여러 줄 입력해야 할 경우 텍스트 영역을 지정하는 태그이다.

굴림체가 기본 폰트로 나오기 때문에 폰트를 다시 설정해주어야한다.      

textarea 태그는 안에 글자를 작성하면 안된다.

내용이 그대로 나오기도 하고 줄바꿈이나 코드 앞에 들어가는 공백도 모두 포함되기 때문이다.

속성 값
cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows	텍스트 영역의 세로 높이를 줄 단위로 지정한다. 만약 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.
** cols와 rows의 글자 갯수의 기준은 영문이다. cols와 rows를 둘 다 쓰면 textarea의 넓이를 지정해 줄 수 있다.
minlength	최소 문자 갯수를 지정한다. 텍스트를 입력할 수 있는 필드라면 어디든 쓸 수 있는 속성이다.
maxlength	최대 문자 갯수를 지정한다. 텍스트를 입력할 수 있는 필드라면 어디든 쓸 수 있는 속성이다.