[HTML] form, input, select 태그 정리

1. form

 

form 태그의 입력양식을 통해 사용자에게서 입력을 받아 커뮤니케이션 할 수 있다. 

 

form 의 속성으로는 action, method 가 있다. 

 

action 은 폼을 제출했을 때 어디로 이동할지 경로를 정하는 속성이다.

 

method는 GET 방식와 POST 방식이 있다. GET 은 서버로부터 데이터를 받아오는 것이고, POST 는 서버에게 데이터를 주는 것이다. 이러한 입력양식을 모두 form 에서 속성으로 정할 수 있다. 

 

 

 

2. input

 

form 안에는 input 을 써서 폼이 구체적으로 어떤 입력들을 가질 것인지 작성할 수 있다. 

 

<form method="GET">
    <input type="button", value="click">
</form>

 

위의 예는 type="button" 을 통해 버튼을 만든 것이다. 여러가지 속성들을 통해 다양한 입력들을 만들 수 있다. 

 

button : 버튼

 

checkbox : 체크박스

 

date : 달력처럼 년월일 고를 수 있음.

 

datetime-local : date 에 시간까지 설정 가능

 

image : 이미지를 버튼으로 만들 수 있음. 

 

email : 이메일을 입력하면 자동으로 검증 

 

file : 파일 업로드 가능

 

number : 숫자 입력가능

 

password : 입력하면 비밀번호처럼 * 로 표시됨

 

range : range 조절 칸 생성

 

url : url 입력

 

text : 일반적인 텍스트 입력

 

 

 

3. select

 

칸을 만들어 제한된 범위 내에서 고를 수 있는 옵션칸을 만들어줌. 

 

<select name="weight exercise">
      <optgroup label="chest">
        <option value="benchpress">bench press</option>
        <option value="inclinedumbbellpress">incline dumbbell press</option>
      </optgroup>
      <optgroup label="back" disabled>
        <option value="deadlift">dead lift</option>
        <option value="pull up">pull up</option>
      </optgroup>
</select>

 

select : 선택 칸을 만들어줌

optgroup : 옵션의 그룹을 만듦. 그룹이 필요없는 경우면 안써도 됨 

option : 선택할 수 있는 옵션들

 

실제로 POST 를 통해 데이터를 보낼 땐 select 에 있는 name 이 '키' 가 되고, option 에 있는 value 가 '값' 이 되어 key=value 형태로 전달된다. 

 

 

 

4. fieldset, legend

 

입력양식들을 시각적으로 그룹화 할 때 사용한다. 

 

<fieldset>
        <legend>Login</legend>
        Username <input type="text" name="username">
        Password <input type="text" name="password">
</fieldset>

 

legend 는 입력양식 그룹의 이름이다. 

 

 

 

 

5. 추가적인 것들

 

input 의 type="button" 이 아닌 그냥 button 태그도 존재한다. 이걸로도 버튼을 만들 수 있는데, input 을 이용해 만드는 버튼과의 차이점은 input 을 통해 만들 경우 빈태그가 되어 버튼 안에 이미지 같은 다양한 content 를 담기 힘들다. 하지만 button 태그는 열린 태그 이므로 content 를 다양하게 사용할 수 있다는 장점이 있다.