HTML5 기초 | 입력 양식 form 태그 input 태그 type 속성
입력 양식은 사용자로 부터 입력을 받는 양식이다.
웹브라우저가 탄생하고 의미있는 온라인의 연결은 이 입력양식의 전송에서 이루어졌다고 봐도 과언은 아니다.
회원가입, 로그인, 게시판의 글쓰기, SNS의 댓글 쓰기, 이메일 쓰기 등 이미 우리 생활에는 깊숙히 침투해있다. 그게 언제부터 있었는지 기억조차 나지 않는다.
라떼는 소리가 나온다.
모바일이 등장하고 약간의 UI가 달라졌지만 여전히 흰색 양식에 뭔가를 입력해야 한다는 사실은 변함이 없는 것 같다.
입력 양식을 본격적으로 사용하는 것은 서버와 DB 프로그래밍을 해야한다. 이 포스팅은 밖으로 보여주는 부분인 HTML에 관련된 내용이다. 서버 프로그래밍은 차후에 다루도록 하겠다.
입력 양식 태그는 아래와 같다.
<body>
<h1>Form Test</h1>
<form method="GET">
<input type="text" name="search"/>
<input type="submit"/>
</form>
</body>
그러고 보니 인터넷 익스플로러 부터 Form 이란 단어는 약간 MS 의 단어인 것 같다. 어쨋든 form 이라는 단어를 쓰는 것은 목적이 어떤 양식에 맞춰서 내용을 채운다는 말이다. 비슷한 기능을 다른 GUI 프레임워크에서는 컴포넌트라고 한다. form은 인터넷 브라우저에서 쓰는 것으로 이해하면 좋을 듯 하다.
input tag type 속성값에 따라 form의 형태가 결정된다. form의 method GET 방식은 주소에 요청을 실어서 보내는 방식이다. 방식은 POST 와 GET이 있는데 서버 프로그래밍에서 다룬다. 브라우저에서 보이는 HTML의 Form은 동일하지만 서버사이드의 언어는 다를 수가 있다. Node.js 인지 Java Spring 인지 다른 경우가 생긴다. get과 post를 처리하는 방법은 그 특정 서버프로그래밍에서 다루게 될 문제다.
바꿔말하면 HTML에서 한번 알고 있으면 공통이니까 다시 돌아와서 볼 필요가 없다. HTML의 두 전송 방식은 수십년간 안바뀐 것으로 알고있다.
이 포스트에서는 외형적인 부분을 다룬다.
input 태그
type 속성값의 종류는 아래와 같다.
| type value | description |
| text | 텍스트 입력 필드 |
| password | 패스워드 입력 필드 |
| 이메일 입력 | |
| tel | 전화번호 양식 |
| submit | 제출버튼 |
| reset | 초기화한다 |
| button | 그냥 버튼 |
| hidden | 숨김 |
| checkbox | 체크박스 |
| radio | 라디오 버튼 |
| image | 이미지 버튼 |
| color | 색상 선택 |
| number | 숫자값 |
| range | 범위 조절(볼륨 같은) |
| url | 인터넷 주소 |
| date | 날짜선택 |
| time | 시간선택 |
| month | 월선택 |
<body>
<label>Form Test</label>
<form action="#" method="GET">
사용자 ID <input type="text" name="user" required><br/>
패스워드<input type="password" name="pass"/><br/>
이메일 <input type="email" placeholder="address@email.com"><br/>
전화번호<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required placeholder="010-1234-1234" size="13"><br/>
<input type="submit" value="가입하기" />
<input type="reset" value="초기화" /><br/>
<input type="button" value="버튼" /><br/><br/>
<input type="hidden" value="숨김" /><br/>
<input type="checkbox" name="checkboxtest" value="1" />체크박스1<br/>
<input type="checkbox" name="checkboxtest" value="2" />체크박스2<br/>
<input type="checkbox" name="checkboxtest" value="3" />체크박스3<br/>
<input type="radio" name="radiotest" value="1" />라디오 버튼 1<br/>
<input type="radio" name="radiotest" value="2" />라디오 버튼 2<br/>
<input type="radio" name="radiotest1" value="3" />라디오 버튼 3<br/>
</br>
<input type="image" src="weave.jpg" name="bird" width="100" alt="이미지 버튼1" />
<input type="image" src="cat.jpg" name="cat" width="100" alt="이미지 버튼2" />
<input type="image" src="dolphin.jpg" name="dolphin" width="100" alt="이미지 버튼3" />
<br/>
<input type="color" /><br/>
<input type="number" value=1 /></br>
<input type="range" id ="volume" min="0" max="100" value="50" step="10" />volume</br>
<input type="url" placeholder="https://www.google.co.kr/" pattern="http://.*" size="30" required></br>
<input type="date" min="2020-07-01" value="2020-08-22"></br>
<input type="time" min="09:00" max="18:00" required value="10:00"></br>
<input type="month" min="2020-07" value="2020-08"></br>
</form>
</body>
HTML5에 들어와서 상당히 혁신적으로 바뀌었다.
당연하지만 이 속성들을 다 외울 필요는 없다. 웹문서와 IDE의 자동완성기능을 사용한다. VSC(비주얼 스튜디오 코드)의 자동 리스트 선택 기능에서 아래처럼 선택가능하다.
Web개발의 기본적인 Documentation 은 MDN Web Docs 를 추천한다. 15년의 역사로 신뢰할 수 있는 내용과 한글어 번역이 된 페이지도 많다.
*Input 입력요소 상세
: 입력 요소
HTML input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
developer.mozilla.org
15주년을 맞은 MDN Web Docs
https://hacks.mozilla.org/2020/07/mdn-web-docs-15-years-young/
MDN Web Docs: 15 years young – Mozilla Hacks - the Web developer blog
MDN Web Docs turns 15 years old! This celebratory article highlights fifteen big wins of the last five years. With initiatives like the browser compatibility data project, learning areas and ...
hacks.mozilla.org
