폼(Form) 요소

 

1. 폼 요소란 ? -> 사용자에게 시각적으로 틀을 보여주기 위한 화면이다. 비슷한 기능으로 C #에 Windows Form이 있다.

 

이러한 화면 구성을 만드는 것을 도와주는 기능이다. 

---

<fieldset>

<legend>기본정보</legend>

<lable>아이디 : </lable>

<input type = "text" name = "id" value = "입력값"/> <br/>

 

 

<lable>이름 : </lable>

<input type = "text" name = "name" value = "입력값"/>

 

</fieldset>

 

 

<fieldset>

<legend>기타정보</legend>

<lable for = : "addr"> 주소 : </lable>

<input type = "text" name = "addr" id = "addr"/> <br/>

 

 

<lable for = "email">이름 : </lable>

<input type = "text" name = "email" id = "email"/>

 

</fieldset>

 

<fieldset> 태그는 위의  스크린 샷의 테두리 (박스)를 만들어 주는 역할을 한다. 이 안에서 폼에 대한 작업을 한다. 

<legend> 태그는 <fieldset> 태그 안에서 필드셋의 제목을 나타내 주는 역할을 한다. 

그 다음 "아이디 : "라는 텍스트를 출력하고 텍스트박스를 만들어준다. html에서 텍스트 박스를 만드는 것음 <input type ="text"로 해주면 된다. name = "id"는 서버에게 id라는 이름(키)로 전송을 한다는 것이다. 그래서 서버는 들어온 값이 id라는 것을 인식 할 수 있다. 입력 값은 value에 입력을 해주면 된다.  나머지 필드셋도 마찬가지이다. 

 

 

<fieldset>

<legend>기본정보</legend>

<p>

<label for = "labelID"> 아이디 : </label>

<input type = "text" id = "labelID" name = "id"

placeholder="아이디는 영문으로 입력하세요"

required="required"

pattern = "[a-z]{3}"

autofocus ="autofocus"

autocomplete = "off"/>

</p>

 

<p>

<label for = "labelPW"> 비밀번호 : </label>

<input type = "password" id = "labelPW" name = "pw"/>

</p>

 

<p>

<label for = "labelBirth"> 생년월일 </label>

<input type = "date" id = "labelBirth" name = "birth"/>

</p>

 

</fieldset>

<label for = "labelID"> 아이디 : </label>

<input type = "text" id = "labelID" name = "id" 에서 볼 수있듯이 for="labelID" 부분과 id="labelID" 이 부분이 같은 것을 볼 수 있다. 이 부분은 레이블 부분과 텍스트박스(패스워드타입)을 연동시켜주는 부분으로 비밀번호 텍스트를 클릭해도 텍스트 박스로 자동으로 이동이 된다. 

placeholder="아이디는 영문으로 입력하세요" --> 아이디를 입력하는 부분에 힌트를 준다. 

required="required" --> 이 부분이 작성이 안되면 서버에 전송할 수 없다. 

pattern = "[a-z]{3}" --> 이 형식을 지켜서 id를 작성해야 한다. 알파벳 3문자로 작성하라는 말이다. 

autofocus ="autofocus" --> 시작하자마자 이 부분에 커서가 잡힌다. 

autocomplete = "off"/>  --> 자동완성 부분을 꺼준다.

 

 

이번에는 이 부분을 만들어보자. 어려울 거 같지만 별 거 없다.

 

---

 

 

<fieldset>

 

 

<legend>파일업로드</legend>

<p>

<label for = "labelID"> 파일유형 : </label>

<select name = "sel">

 

<option value = "kk"> 공지사항 </option>

<option value = "bb"> 자유게시판 </option>

<option value = "cc" selected = "selected"> 회원전용 </option>

 

 

 

</select>

 

<br/>

<small>

데이터 전송시 선택된 태그만 값이 전송된다.

</small>

 

</p>

 

<p>

<label>파일업로드 </label>

<input type = "file" name = "fileupload" />

</p>

 

 

 

</fieldset>

<input type = "submit" value = "가입"/>

 

 

select name = "sel"> 이 부분은 

 

 

이 부분처럼 클릭하면 리스트들이 보이게 만들어주는 부분이다. 

 

<option value = "kk"> 공지사항 </option>

<option value = "bb"> 자유게시판 </option>

<option value = "cc" selected = "selected"> 회원전용 </option>  이 코드는

이런 형식을 만들어준다. 

 

<input type = "file" name = "fileupload" /> 이 부분은 위 사진에 "파일선택"을 만들어준다.  

 

끝 !