이미지 버튼을 나타내는 type="image"

input type="image" src="이미지 경로" alt="대체 텍스트"로 구성된다.
로그인 버튼 이미지를 변경할 때 주로 사용함

파일 첨부 입력

반품 정보

상품에 하자가 있다면 즉시 반품 신청해주세요

반품 신청시 상품의 상태를 사진으로 첨부해 주세요

---

히든 필드를 만들 때 사용하는 type="hidden"

사용자에게 굳이 보여주지 않을 정보, 하지만 입력을 받음과 동시에 히든 필드의 내용도 함께 서버로 전송된다.

input에서 가장 중요한 autofocus와 placeholder

1. autofocus

autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
※ 주로 required 앞에 사용한다.

이름

2. placeholder

사용자가 텍스트를 입력하기 전, 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지겠금 만들어진 속성이다.

연락처

추가로 알아둘 readonly 속성과 required

3. readonly

이름 그대로 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다.

주문상품

4. required

반드시 입력되야 할 내용에 사용한다. 하지만 자바스크립트를 이용하면 쉽게 무효 시킬 수 있으므로 반드시 서버에서도 이중으로 보완해야한다.

여러 줄을 입력하는 textarea 태그

폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다.
너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 row 속성을 가지고 있으며, 한글 1글자는 영문 2글자에 해당하기에 cols="40"으로 지정하면 한글은 20글자가 되니 응용할때 유의하자

textarea 태그를 사용해 만든 간단한 상품 주문서 메모

• 메모

여러 옵션 중 선택하게 만들어주는 select , option 태그

추천 상품 1. 이거 ---선택해주세요--- 추천 상품 2. 저거 추천 상품 3. 요거 추천 상품 4. 여거 추천 상품 5. 제거 추천 상품 6. 수거

select 태그의 속성 size와 multiple

---선택해주세요--- 추천 상품 1. 이거 추천 상품 2. 저거 추천 상품 3. 요거 추천 상품 4. 여거 추천 상품 5. 제거 추천 상품 6. 수거

size는 화면에 표시할 항목의 갯수 지정, multiple은 둘 이상의 항목을 선택할때 사용한다.

※ option 태그의 첫 번째 항목이 기본적으로 목록에 보이고 싶으면 selected 속성을 사용한다.
위의 ---선택해주세요---를 보면 option배치가 아래 있음에도 selected를 이용해 첫 번째 항목에 나타나고 있다.

데이터 목록을 만들어주는 datalist, option 태그

포장 여부 선물 포장 포장 안 함

select의 option과 같이 각 데이터의 옵션을 나타내고, 차이가 있다면 value 속성을 이용해 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.

---

※ 여긴 결과물 페이지