HTML 5 :) HTML 폼 테그 활용하기! 체크박스 & 폼 요소 만들기

HTML 기초 텍스트 

---

오늘 정리할 내용은 HTML에서 자주 사용되는 체크박스와 폼 요소만들기 입니다.

특히, 이 폼 테그는 저희가 알게 모르게 웹 문서에서 굉장히 자주 사용하고 있습니다. 사용자의 의견이나 정보를 알기위해 폼을 사용하는 경우가 많죠. 폼에서는 굉장히 다양한 형태를 볼 수 있는데 오늘 공유드릴 내용은 그 중 가장 기본적인 방식입니다.

일반적으로 구글 폼이나, 네이버 폼 등에서 설문조사를 진행할 때 흔히 볼 수 있는 방식입니다.

그리고 일반적인 로그인 창이나 이메일 작성란, 텍스트가 입력되는 모든 블랭크 부분들 또한 폼으로 만들어 지는 부분입니다.

 

여기서, 이전에 정리한 리스트 속성들이 그대로 사용되게 되고, 뭔가 저도 공부를 할 때 이제서야 뭔가가 만들어지는구나 하는 느낌을 받았던 재미있는 파트였습니다.

(재미도 있지만 어떤의미로 굉장한 벽을 느낀 파트였습니다)

 

 

 

먼저 폼 속성을 보도록 할게요

 

기본형

<form[속성="속성 값"]> 폼 요소</form>

 

가장 쉬운예시로,

상기 그림과 같이 html을 작성하게 되면,

이렇게 간단한 검색 php를 만들 수 있습니다(본문에서 html을 적용할 수 있네요!! 이럴수가)

 

당연히.. 이건 형태만 갖춘 것이기 때문에 서버프로그래밍을 할 줄 알아야 올바르게 사용할 수 있습니다.

html은 겉 형태만 만드는 점 유의하셔야 합니다!

 

이제 체크박스를 한번 보도록 하겠습니다.

 

간단한 방식으로 작성하고,

 

체크 박스 형태를 구성하는 부분은,

<input type="checkbox">항목   <-- 바로 이 부분입니다.

하기 옵션에서는 스타일 시트가 적용되지 않았기 때문에, ul의 기본 서클확장자가 붙은 상태이며, 아래와 같이 표시되게 됩니다.

 

• 문법
• 작문
• 독해

벨류 없음

 

이렇게 상기 설정 중 value="grm" 으로 설정 된 부분은 뒤에서 정해진 값을 붙이기 위한 확장자로 단순히 체크박스 형태만 구현하기 위해서는 <input type="checkbox"> 만으로도 형태를 취할 수 있습니다.

 

이어서 간단하게 ID / PW창을 만드는 형태를 확인하겠습니다

 

구분이 용이하게 스타일 시트를 간단히 적용했습니다.

label의 글자 크기는 14px이며, 라인높이는 25px. 

그리고 레이블 안의 em(기울이기)는 빨간색, 글자 굵기는 800 이 설정되어 있습니다.

 

filedset으로 form에 사용될 그룹을 하나로 묶어준 뒤,

label 안에서 ID / PW를 em으로 설정을 하게 됩니다.

input 설정 타입은 텍스트(글자입력)이고 id는 임의로 작성, 사이즈는 10 이며 자동글 완성은 off로 설정 된 상태입니다.

해당시트를 동일하게 적용해 보면

 

ID: PW:

이런 형태로 구성할 수 있습니다.(스타일이 적용이 안됬네요)

(저 또한 초심자인지라 윗 부분까지 다 건드리려 하니 작성글이 무너질까 두려워서 일단.. 그대로 두고 진행하도록 하겠습니다 ㅠㅠ 관련된 테클이나 조언 언제나 감사히 받겠습니다)

 

해당작업을 반복함으로 인해

다양한 폼 형식을 작성할 수 있습니다. 

회원가입, 주소입력 또는 설문지 같은 것들이죠.

---

 

개인적인 생각으로는 이 부분은 저처럼 취미삼아서 html을 공부하시는 분들껜 알아두어야 할 파트이긴 하지만 절대적으로 필요한 사항은 아닐 것 같습니다.

 

위의 폼 형식들은 이미 대형 서치사이트에서는 기본적으로 제공해 주고 있을 뿐더러, 우리네 취미 생활범위 안에서 사용할 부분은 아니라고 생각되기 때문입니다.

 

html과 css는 결국 웹에서 보이는 형식을 만드는 것이기 때문에 굉장히 중요하면서도, 이렇듯 정보를 입력하여 정보를 불러오는 작업을 위해서는 백엔드 서버작업까지 할 수 있어야하는데 그 부분은 정말정말 어려울 것 같다는 생각입니다.

 

 

html도 책만보고 따라하니 안되는것들 투성이라 구글링하면서, 또 개발자 모드에서 샘플들 봐 가면서 카피하고 수정하고 하면서 겨우겨우 해 내었는데 서버쪽이라면 뭐..

 

먼저 html을 잘 정리해 보고 다른것들도 도전해보려 합니다.

 

 

 

굉장히 간단한 설명이었지만 혹여 필요한 분께 도움이 되셨길 바랍니다~