입력 양식 작성하기 (1)

이번 단원에서는 신기한 태그를 많이 배웠다.

 

평소 내가 많이 접하던 기능을 배울 수 있어서 재미있게 공부했지만 로그인과 같이 데이터베이스를 알아야 완전한 기능을 만들 수 있는 것도 있어서 데이터 베이스에 관해서도 흥미가 생긴 단원이였다.

---

폼 삽입하기

 

폼 : 특정 항목에 사용자가 무언가를 입력할 수 있게 만든 것 

 

폼의 작동원리 

 

사용자가 정보를 입력 → 정보가 데이터베이스로 이동 → 원하는 값을 사용자에게 전달

※ 이 때 사용자에게 보여지는 화면을 대부분 웹에서 처리한다. 따라서 HTML을 이용해서 폼을 만든다.

 

폼을 만들기 위한 태그

• <form> ~ </form> : 폼을 만드는 태그. 폼의 가장 윗 부분과 아랫부분에 지정한다.

form 태그의 속성 

method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정  get : 데이터를 256 ~ 4096byte 까지 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남 post : 입력한 내용에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
action	<form> 태그 안에 내용을 처리해 줄 서버 프로그램을 지정
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함

 

 

• <fieldset> ~ </fieldset> : 하나의 폼 안에서 여러 구역을 나누어 표현할 때 사용
• <legend> ~ </legend> : fieldset 태그로 묶은 그룹에 제목 붙히기

미리보기

레드향 주문하기

상품 선택

배송 정보

---

• <lable> ~ </lable> : 레이블을 붙힐 때 사용. 입력란 가까이에 붙여 놓은 텍스트
• <input> ~ </input> : 사용자가 입력할 수 있는 부분을 만드는 태그

미리보기

아이디(6자 이상)

---

 

 

<input> 태그의 유형 (type)

• text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 생성
• password : 비밀번호를 입력할 수 있는 필드를 생성 (입력하는 글자가 * 와 같은 문자로 바뀌어 보이지 않음)
• search : 검색할 때 입력하는 필드 생성
• url : 주소를 입력할 수 있는 필드 생성
• email : 이메일 주소를 입력할 수 있는 필드 생성
• tel : 전화번호를 입력할 수 있는 필드 생성 (모바일에서 클릭 시 전화를 할 수 있음) 
• checkbox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스 생성
• radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 생성
• number : 숫자를 조절할 수 있는 스핀박스 생성
• range : 숫자를 조절할 수 있는 슬라이드 막대 생성
• date : 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣음
• month : 사용자 지역을 기준으로 날짜(연,월)를 넣음
• week : 사용자 지역을 기준으로 날짜(연,주)를 넣음
• time : 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣음
• datetime : 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣음
• datetime-local : 사용자가 있는 지역을 기준으로 낳짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 를 넣음
• submit : 전송버튼을 생성
• reset : 리셋 버튼을 생성
• image : 이미지 전송 버튼을 생성
• button : 버튼 생성
• file : 파일을 첨부할 수 있는 버튼 생성
• hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성