[HTML] 입력 양식 작성하기

✅폼 삽입하기

웹에서 만나는 폼

• 사용자가 웹 사이트(서버)로 정보를 보낼 수 있는 요소들은 모두 폼(form)

 

<form> 태그

• 폼을 만드는 기본 태그
• 기본형
  • <form [속성="속성값"]> 여러 폼 요소 </form>

• 속성
  • <method>: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
  • <name>: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
  • <action>: <form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정
  • <target>: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함

 

<fieldset> 태그

• 폼 요소를 그룹으로 묶는 태그
• 기본형
  • <fieldset [속성="속성값"]> ~ </fieldset>

 

<legend> 태그

• 그룹으로 묶는 구역에 제목을 붙이는 태그
• 기본형
  • <fieldset><legend>그룹 이름</legend></fieldset>

 

<label> 태그

• <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
• 형식
  • <label>태그 안에 폼 요소를 추가한다
  • <label>태그와 폼 요소를 각각 따로 사용한다
    • 단, <label>태그의 for 속성과 폼 요소의 id 속성을 이용해서 서로 연결해야 한다.

<form>             <fieldset style="width: 350px;">                 <legend>구역의 제목</legend>                 <label for="user-id">텍스트</label>                 <input type="text" id="user-id">             </fieldset>         </form>

---

✅input 태그

input 태그 속성

🔖text

한 줄짜리 텍스트 입력 필드

주로 아이디나 이름, 주소 등 텍스트 입력

 

🔖password

비밀번호 입력란

사용자가 입력하는 내용이 ' * '나 ' • '로 표시

 

🔖search

검색 필드

검색 창에  x 표시가 되어 검색어 삭제가 쉬움

 

🔖url

웹 주소 필드http://로 시작하는 사이트 주소 입력

 

🔖email

메일 주소 입력 필드메일 주소 형식 자동 체크

 

🔖tel

전화번호 입력 필드

사용자 입력을 체크하지는 않음

 

🔖checkbox

여러 항목 중 둘 이상을 선택할 때

 

🔖radio

여러 항목 중 하나만 선택할 때

 

🔖number

숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시

 

🔖range

숫자 입력 필드. 슬라이드 막대를 이용해 숫자 입력

 

🔖date, month, week

기본형: <input type="date | month | week">

 

🔖time, datetime, datetime-local

기본형: <input type="time | datetime | datetime-local>

 

🔖submit, reset

폼 전송/리셋 버튼전송(submit) 버튼: 사용자 입력 내용을 서버로 전송

리셋(reset) 버튼: 사용자 입력 내용 전부 삭제. value 속성을 이용해 버튼 표시 내용 지정

 

기본형: <input type="submit | reset " value="버튼에 표시할 내용">

 

🔖image

submit 버튼 대신 이미지 삽입

 

기본형: <input type="image" src="이미지 경로" alt="대체 텍스트">

 

🔖button

기능 없이 버튼 형태만 삽입

주로 버튼 클릭해서 자바스크립트 실행할 때 사용

value 속성을 이용해 버튼 표시 내용 지정

 

기본형: <input type="button " value="버튼에 표시할 내용">

 

🔖file

파일 첨부, '파일 선택' 이나 '찾아보기' 버튼으로 표시됨

 

🔖hidden

화면 상의 폼에는 보이지 않는다.

폼을 서버로 전송할 때 서버로 함께 전송되는 요소

 

기본형: <input type="hidden" name="이름" value="서버로 넘길 값">