웹개발의 기본언어 HTML 다양한 양식 폼, Input 태그 및 속성

---

웹에서 다양한 정보를 제작자가 만들고 이를 웹에 방문한 사용자들이 정보를 해당 항목에 입력하여 사용자 정보를 기반으로 로그인, 상품주문, 설문지작성 등 다양한 곳에서 사용할 수 있도록 프로그래밍하여 처리하는 일명 폼기반의 웹 문서를 만들기 위해 사용하는 <form></form> 태그에 대하여 알아 보도록 하겠습니다.

 

일단 기본으로 적용되는 <form>값은

<form 속성="속성값"></form> 입니다.

일단 비주얼스튜디오에서 해당값을 입력하게 되면 사용 가능한 속성값이 나열되는데 이를 하나씩 살펴 보도록 하겠습니다.

 

보시는 것과 같이 속성에 method를 입력했을 경우에 "dialog", "get", "post" 3가지 속성을 사용할 수 있도록 보여지는데요 각각 하나씩 설명드리겠습니다.

 

<form method="dialog"></form>으로 입력하였을 경우에는 폼요소를 제출하게 될경우 표시된 상자 입력폼을 닫아 보이지 않도록 합니다.

아래와 같이 코딩을 마친 후 해당 버튼을 클릭하면 정보를 원했던 상자는 사라지고 입력된 데이터는 전송되게 됩니다. 

 

이외에 사용할 수 있는 속성값은

method의 "get" = 데이터를 서버로 넘길 수 있으나 주소 표시줄에 입력한 내용이 그대로 드러납니다.

method의 "post" = 입력 내용의 길이제한이 없고 입력한 내용도 보여지지 않습니다.

 

<form name> = 자바스크립트로 폼제어시 이름지정

<form action> = 태그안에 내용 처리해 줄 서버 프로그램 지정

<form target> = action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 하는 기능

 

<form action=" " autocomplete="on or off"></form> 자동완성기능을 on 과 off 를 이용하여 켜고 끌 수 있습니다.

---

폼을 사용하면서 그룹그룹으로 묶어 보다 깔끔하게 처리하고 싶을 경우 사용할 수 있는

<fieldset>, <legend>태그를 이용한다면 영역을 나누어 입력받을 정보를 넣을 수 있기 때문에 한눈에 쉽게 알아볼 수 있도록 웹문서를 만들 수 있게 됩니다.

 

<fieldset>

  <legend>나눌 그룹 이름</legend>

</fieldset>

 

이런 방식으로 각 그룹 이름을 입력하여 준다면 웹문서 안에 구분된 정보칸을 확인 할 수 있게 됩니다.

---

폼 요소 안에서 <label>태그를 이용하여 텍스트를 입력하고

<input>태그를 이용하여 사용자들이 정보를 입력하는 간단한 방법을 알아보겠습니다.

 

<label>이름<input type="text"></label> 과 같이 입력하면 간단하게 텍스트폼으로 이름을 입력할 수 있는 창이 보여지고 창앞에 이름을 보여지게 됨으로 어떤 내용을 기입해야 하는지를 사용자들이 알게 하는 효과를 줍니다.

 

출력 화면이 미세하게 다릅니다.

label의 input 창 2가지 버전입니다.

---

textarea = 텍스트 영역을 길게 쓰는 필드를 구성합니다.

 

cols와 rows를 속성으로 사용합니다.

cols 글자수

row 줄 수

 

---

# select → 2개 이상의 목록을 보여지도록 합니다.

 = 함께 사용하는 속성 size(항목개수), multiple(2개이상선택)

# datalist → 목록을 미리 만들고 그중에서 선택할 수 있도록 

# option → select, datalist와 함께 쓰이며 선택항목을 만듭니다.

 = 함께 사용하는 속성 value, selected

 

---