HTML 기본적인 폼 (선택)

이 글에서는 HTML의 기본적인 폼 중에서 선택, 제출에 대한 글을 쓰겠습니다.

가장 기본적인 형태를 보여주는 것이라서 생각했던 폼이 아닐수 있습니다.

 

먼저 기본적인 선택에 대한 폼 몇개를 소개하겠습니다.

 

1. checkbox

기본적인 문법은

<input type = "checkbox" name="변수배열" value="값1">No.1

<input type = "checkbox" name="변수배열" value="값2">No.2

<input type = "checkbox" name="변수배열" value="값3">No.3

 

3가지를 적었습니다. 그래서 나온결과를 한번 보겠습니다.

 

기본적인 이미지

 

선택지 뒤편에 No.1 이런 단어는 마음대로 바꾸셔도 됩니다. 그리고 name이 변수배열 (예. lang[])을 놓는 이유는

checkbox는 기본적으로 하나 이상이 선택가능 하기 때문에 배열로 넣은 것입니다.

다중선택

 

주의하실점이 변수배열은 같은 값의 배열로 해주셔야하고, value의 값은 각각 다른값으로 해주셔야 합니다.

 

2. radio

두번째는 radio 타입입니다. 이 타입은 checkbox와 같으면서도 다르죠. checkbox는 다중선택이 가능했지만,

radio는 둘중에 하나 값만 선택할수있게 해주는 것 입니다.

기본적인 이미지

기본 문법은 checkbox와 비슷합니다.

input type="radio" name="변수이름" value="1">1

input type="radio" name="변수이름" value="2">2

 

다른점이 눈에 들어오실겁니다. 물론 type은 radio 타입이라고 적어주셔야 합니다. name 에서 보시면 둘중에 한 값만 적용이 되기때문에 배열값이 아니라 단일값으로 적어주시면 됩니다.

 

3. select

네 선택하는 폼에서 마지막 폼인 select입니다. 이 폼은 위에 두개와는 확실한 차이가 나는 폼이죠. 말이 긴것보다는 먼저 보여주는게 좋겠네요.

 

select창

기본적으로 보여지는 창입니다. 회원가입하실때 생년월일 고를때 많이 보시는 창 이실겁니다.

기본적인 문장은 위에 2개와는 다릅니다.

 

<select name="변수이름">

 <option value="1">No.1</option>

 <option value="2">No.2</option>

 <option value="3">No.3</option>

 <option value="4">No.4</option>

</select> 

문장으로 2개만 적으면 적을수 있겠지만 길게 하기위해서 4가지를 적었습니다.

 

그리고 select 괄호안에 맨 뒤쪽에 size="2" 와 같이 적어주시면

 

size 적용

위와 같은 모습으로 4가지를 선택할 수 있는 모습이 됩니다.

 

여기까지 선택에 관한 폼 3가지 였습니다. 서툴고 긴글 읽어주셔서 감사합니다.