HTML 프로그래밍 3/17 네번째(폼,인풋,체크박스)

오늘 배울것은

1. 폼
2. 인풋
3. 체크박스/라디오박스
4. number&range 태그
5. 날짜 선택 인풋태그
6. 시간태그
7. 버튼(제출,초기화) 이다.

 

 

 

1. 폼(form)

: 입력 양식을 담는 틀

 

폼의 속성 값

method(방법)

→ post : 주소창에 입력한 것이 보이지 않음.

→ get : url주소창에 입력한 게 보인다.

ex) 로그인

 

name - JavaScript에 넘겨줄 form 이름을 말한다.

action - <form>에 내용을 처리해줄 프로그램과 연결 (자주 쓰임)

target - 현재 창이 아닌 다른 위치에서 열리도록 한다.

 

 

---

 

 

 

<fieldset> </fieldset> → form 안에 있는 것들을 묶어준다

<legend> </legend> → fieldset 제목 설정 tag

 

 

코드

 

사용 인풋 태그

 

 

실행화면

 

 

2. input태그

<input type=" "  id="  ">

type = 입력할 것의 종류를 말한다. ex) text, email, number 등등

id = 임의지정, 식별번호

 

위에서 보이는 것처럼 for의 st_number와 id의 st_number를 같게 해야한다.

for의 속성 값과 id 속성 값을 같게 맞춰야 웹문서가 연결되어 있음을 인식한다.

(꼭 같게 맞추기!!!)

 

 

 

3. 체크박스 버튼과 라디오 버튼

<label><input type="checkbox/radio">text1</label>

 

속성

①value(값):서버로 선택된 것을 넘겨줄 때"반드시"필요한 속성

②checked:이미 체크됨

③name:배열의 이름이라 생각하기

a라는 배열에서 value만 다르게 사용

 

 

체크박스 버튼

→중복선택 가능

 

라디오 버튼

→중복선택 불가능

 

 

코드

 

실행화면이다.

보이는 것처럼 라디오 버튼은 선택 시 취소가 되지 않고, 중복 선택또 한 체크박스와 달리 되지 않는다.

 

 

※ 태그 사용 방법

 

①두줄로 입력

<label for="  ">  </label>

<input type="  " id="  ">

 

예

 

②한 줄로 입력

<label><input type="  " name="  " value="  ">   </label>

 

예

 

 

4. number&range 태그

: 숫자 입력하는 태그이다.

 

속성 값

예시

→ value를 사용해 10에서 시작, min=0, max=100으로 설정

 

 

 

 

코드

for와 id 값을 꼭 동일하게 맞춰줘야 웹문서가 연결되어 있음을 인식한다.

 

실행화면이다.

학년 옆 네모 칸에 1에서 3까지 숫자를 쓸 수 있고 처음 설정값은 1이다.

(range 사용 시 숫자가 보이지 않아서 잘 쓰이진 않는다.)

 

 

 

5. 날짜 선택 인풋태그

 

코드

각각 날짜를 선택하는 태그이다.

 

실행화면이다.

이런 식으로 나오는데 필요에 따라 선택하여 사용하면 된다.

 

6. 시간 태그

time : 오전/오후, 시, 분을 나타낸다.

datetime : 지역 시간(날짜, 시간)을 나타낸다.

datetime-local : 지역시간(날짜, 시간)을 나타낸다.

 

코드

 

실행화면이다. 요런 식으로 나온다.

필요에 따라 쓰면 된다.

 

 

7. 버튼

submit (제출) → 서버로 데이터를 전송한다.

reset → 입력 필드에 입력한 것을 reset한다.

 

입력예시

<input type="submit/reset" value=" 제출하기/취소 ">

 

코드

 

실행화면

 

초기화 버튼 사용하면

이렇게 내용이 사라진다.