HTML(2)

입력양식 작성하기

입력 양식이란 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것으로 '폼'아록도 합니다.입력양식을 사용하면 로그인 창에 아이디와 비밀번호 항목등을 넣을 수 있습니다.

 

폼의 동작 과정

폼의 동작과정

1.사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송됨.

2.서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인후 웹 브라우저에 전송.

텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자의 정보는 ASP나 JSP같은 서버 프로그래밍을 이용해 처리.

---

1.폼 삽입하기

1.폼을 만드는 <form>태그

<form[속성="속성값"]>여러 폼 요소 </form>

<form>태그는 몇가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버에 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정.

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

 

2.폼 요소를 그룹으로 묶는 <fieldset>,<legend>태그

하나의 폼 안에서 여러 구역을 나누어 표시할때 <fieldset>태그를 사용.

<legend>태그는 <field>태그로 묶은 그룹에 제목을 붙일 수 있음.

<fieldset> <legend>상품 선택</legend> </fieldset> <fieldset> <legend>배송 정보</legend> </fieldset>

 

3.폼 요소에 레이블을 붙이는 <label>태그

<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용.<label>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음

<label>태그는 2가지 방법으로 사용

1.태그안에 폼 요소를 넣는 것

<label>레이블명<input></label>

2.<label>태그와 폼 요소를 따로 사용하고 <label>태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결

<label for="id명">레이블명<input id="id명"></label>

1번 방법보다 복잡해 보이지만 <label>태그를 사용한 레이블과 사용자 정보를 입력받는 <input>태그 가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점.

---

2.사용자 입력을 위한 input 태그

<input>태그는 매우 다양한 입력형태로 만들 수 있음. <input>태그에서 입력 형태를 지정할때 type 속성을 사용.

종류	설명
text	한줄짜리 텍스트 입력.주로 아이디나 이름,주소등 일반 텍스트 입력할때 사용
password	비밀번호 입력. *로 주로 표시됨
search	웹 브라우저에서 검색을 위한 텍스트필드로 인식.
url	웹주소 입력하는 필드.HTML5 이전까지는 이메일 주소인지, URL 주소인지 JS 활용해 직접 확인. But HTML 5에서는 type="email"을 사ㅛㅇ하면 웹 브라우저가 알아서 확인해 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여줌
checkbox,radio	주어진 여러 항목에서 선택할 수 있는 체크 박스를 넣음
number,range	number를 사용하면 스핀박스가 나타나 숫자를 선택. range는 슬라이드 막대를 움직여 숫자가 입력가능.
date,month,week	날짜를 입력받은 예제
time,datetime	시간을 지정할때 time, 날짜와 시간을 함꼐 지정하려면 datetime 을 활용
submit,reset	전송,리셋 버튼을 활용해 입력한 정보를 서버로 전송.

---

3.input 태그의 주요 속성

단순히 내용을 입력할 뿐만 아니라 입력란에 커서나 힌트를 표시할 수도 있고, 꼭 입력해야하는 필드로 지정이 가능

 

1.자동으로 입력 커서를 갖다 놓는 autofocus 속성

autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시.

<input type=텍스트-입력-필드 autofocus required>

2.힌트를 표시해주는 placeholder 속성

사용자가 텍스트를 입력할때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면서 내용이 사라지도록 만듬.

<input type="tel" id="phone" placeholder="하이픈을 배고입력해주세요.">

3.읽기 전용 필드를 만들어주는 readonly 속성

사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음.

<input type=텍스트-입력-필드 readonly>

4.필수 입력 필드를 지정하는 required 속성

내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사. 필수 입력 필드가 기입이 안될시 오류 메세지를 보여줌.

<input type="text" id="user-name" autofocus required>

---

4.폼에서 사용하는 여러가지 태그

1.여러 줄을 입력하는 텍스트 영역 <textarea>태그

폼에서 텍스트를 여러 줄을 입력하는 영역을 만듬. ex.) 메모 , 추가사항

<textarea>내용</textarea>

 

2.드롭다운 목록을 만들어 주는 <select>,<option>태그

사용자가 내용을 직접 입력하지 않고, 여러옵션 중에서 선택하게하려면 드롭다운 목록이나 데이터 목록을 사용.

<select>
	<option value="값1">내용1</option>
	<option value="값1">내용2</option>
    
<select>

 

3.데이터 목록 만들어주는 <datalist>,<option>태그

데이터목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택

데이터목록을 만들 때는 <datalist>태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그사이에 <option>태그를 사용해 각 데이터의 옵션을 표시.이때value 속성을 사용해서 서버로 넘겨줄 값을 지정함.

<input type="text" list="데이터 목록 id">
<data list id="데이터목록id">
	<option value="서버로 넘길 값1">선택옵션1</option>
    <option value="서버로 넘길 값2">선택옵션2</option>
 </datalist>

4.버튼을 만들어주는 <button>태그

<button>태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정.

<button type="submit">내용1</button>
<button type="reset">내용2</button>
<button type="button">내용3</button>

HTML 끝!