입력 양식 폼

폼 양식을 만드는 <form> 태그

입력 양식 폼을 구성하는 기본 골격을 제공하는 것이 폼태그이다.
이 내부에 텍스트 입력 양식, 암호  입력 양식 등을 기술해야 한다.

<form action = "이동위치" method = "방식">
다양한 폼
</form>

--------form태그에 지정할 수 있는 속성들-------

 

속성	속성값	설명
action	URL	송신한 폼의 데이터를 처리할 프로그램 URL를 지정한다.
method	get	기본 값으로 입력한 데이터가 URL에 포함되어 전송된다.
	post	입력한 데이터가 눈에 보이지 않게 전송된다.

----------------데이터를 입력받기 위한 <input> 태그 ------------------
<input type = "text" name = "이름" value = "초기값" maxlength ="최대길이" size="크기">

텍스트 입력양식은 글자를 입력받거나 출력하는 용도로 사용한다. 입출력이 가능한 텍스트 입력양식은 type
속성의 값으로 "text"를 지정하면 된다.  

속성	속성값	설명
name	문자열	텍스트 입력상자가 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입려된 데이터인지를 구분할 수 있다.
value	문자열	사용자가 입력하기 전에 웹 브라우저가 로드되자마자 초기값을 지정할 경우 사용하는 속성
maxlength	숫자	텍스트 입력양식에 입력받을 수 있는 최대 글자 수를 지정
size	숫자	화면에 보여지는 텍스트 입력양식의 최대 길이를 지정한다.

------------------암호를 입력받기 위한 password---------------

<input type = "password">

 

-----------------------------콤보박스와 리스트 박스를 위한 <select> 태그----------------------------

콤보 박스와 리스트 박스는 여러 가지 항목 중에서 하나를 선택하기 위한 입력양식인데, 리스트 박스를
작성하기 위해서는 <select> 태그를 사용한다. <option> 속성의 항목에 해당 되는 내용을 기술한다.

 

 

태그	속성	속성값	설명
<select>	name	문자열	텍스트 영역이 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입력된 데이터인지를 구분할 수 있다.
	size	숫자	리스트 박스가 기본적으로 보여줄 목록의 개수를 지정한다. size속성 값을 지정하지 않으면 리스트 박스가 된다.
<option>	value	문자열	콤보 박스와 리스트 박스의 각 항목의 값을 지정한다.

<select> 태그에 size 속성을 추가하여 크기를 지정하면 리스트 박스가 나타나고 생략하거나 1을
지정하면 콤보 박스가 나타난다.

------------------------------라디오 버튼을 위한 radio-----------------------------

 라디오 버튼은 여러 가지 항목 중에서 하나를 선택해야 할 경우 사용됩니다. HTML에서 라디오 버튼을
구현하려면 type속성에 "radio"를 지정하고 다음과 같이 표현한다.

<input type = "radio" name ="그룹명">

꼭 목록들의 name을 똑같이 해주어야 걔네들사이에서 하나만 고를수있게 해줌. 

속성	속성값	설명
type	radio	라디오 버튼을 만들려면 type속성 값을 radio로 주어야한다.
name	문자열	name 속성을 동일하게 주면 라디오 버튼을 배타적으로 선택할 수 있다.
value	문자열	라디오 버튼에 출력되는 캡션 값이다.
checked	없음	<input>태그에 checked를 기술하면 라디오 버튼이 처음부터 체크된 상태로 나타난다.

-------------------------명령을 지시하는 버튼을 위한 button-------------------

사용자가 어떠한 명령을 내릴 수 있도록 하는 입력양식이 버튼이다.
<input> 태그의 type속성에 button을 지정하면 버튼을 만들 수 있다.

<input type = "button">

ex)    <input type = "button" value="파인애플">
        <input type = "button" value = "블루베리">

------------------전송버튼과 입력취소버튼을 위한 submit, reset-------------------------

<input> 태그의 type 속성을 "submit"로 지정하면 form 태그의 action 속성에 지정한 페이지로 이동한다.
이때 입력한 모든 데이터의 내용이 이동하는 페이지로 전송된다.

<input type = "submit">   ㅡㅡ> 전송할때

리셋 버튼은 이전에 입력된 데이터를 모두 초기화하고 다시 입력받을 수 있도록 하는 버튼이다.
<input type = "reset">    ㅡㅡ> 재입력할때

 

----------------------체크 박스를 위한 checkbox-----------------------

여러 개 항목을 다중으로 체크할수있는 박스
(관심분야 선택하거나 이럴때.)

쪼끄만 네모칸에 브이 표시하는거!!

사용법,
<input type = "checkbox">

이때 checked를 쓰면 미리 선택이 되어져서 나타남.

ex)

<form>
<input type = "checkbox" name = "check01" checked> 인디아나 존스<br>
<input type = "checkbox" name = "check02"> 해리포터<br>
<input type = "checkbox" name = check03" checked>쿵푸펜더
</form>

------------------여러 라인의 글자를 입력받기 위한<textarea> 태그----------------

사용법,

<textarea>  </textarea> 

속성	속성값	설명
cols		텍스트 영역의 너비를 지정
rows		텍스트 영역의 높이를 지정
name	문자열	텍스트 영역이 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입력된 데이터인지를 구분할 수 있다.