<form>과 <input> 요소 정리

●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다.

1. <form>

양식이라는 뜻이다.

웹 페이지가 상호작용할 수 있게 하기 위한 양식의 최상위 요소로 그 범위를 정의한다.

input요소와 함께 쓰인다.

 

 

2. id

Idenrification의 약자로

어떤 요소를 유일하게 해주는 고유하게 만들어주는 요소이다.

*class와 다른점

class 어떤 집단을 명시 할 때 사용한다.

한 마디로 id를 사용했으면, 다른 곳에 중복으로 사용하면 안된다.

 

 

 

3. action

URI이다. form의 필수속성으로

필드의 내용을 처리하는 처리하는 프로그램의 URI를 지정한다.

*URI 통합 자원 식별자(Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닌다.

ex) <form action="/owner/admin.php" method="post">

폼의 내용 </form>

 

 

4. method

HTTP메소드: 폼의 내용을 처리하는 방법을 지정한다.

ex) <form action="/owner/admin.php" method="post">

폼의 내용 </form>

 

 

4-1. get

action에서 지정한 url에 폼의 내용을 '?'으로 구분으로 하여 추가하여 송신해준다.

요청시 사용자가 입력한 값들이 url에 노출 되는 방식이다.

(검색의 경우 사용된다)

ex) <form action="/owner/admin.php" method="get">

폼의 내용 </form>

 

 

 

4-2. post

폼의 본문으로 송신해준다.

요청시 사용자가 입력한 값들이 url에 노출이 안되는 방식이다.

(보통 회원가입 창에서 쓰인다)

ex) <form action="/owner/admin.php" method="post">

폼의 내용 </form>

 

 

 

5. <input>

• type : 필수속성입니다. 다음은 타입속성에서 사용할 수 있는 값입니다.

  • text : 단일행 텍스트 입력필드
  • password : 비밀번호 입력필드. 감춰져서 출력된다.
  • checkbox : 체크박스 생성. 복수 선택이 가능, 네모난 체크박스
  • radio : 라디오버튼 생성. 복수 선택 불가능, 동그란 체크박스
  • submit : 송신버튼 생성
  • reset : 리셋버튼 생성
  • button : 범용버튼 생성.
  • image : 이미지버튼 생성.
  • file : 송신파일 선택필드 생성
  • hidden : 감춰진 필드.
  • number : 숫자 필드를 생성, 위 아래, 이동 간격 조절 가능 (step : 이동간격을 조절가능)

• name="이름"(필수 속성) : 컨트롤의 이름 지정. type의 속성이 checkbox나 radio일 경우 name속성이 같은 값으로 지정되면 하나의 그룹으로 취급한다.

• value="값" : 컨트롤 종류에 따른 초기값 지정

• size="폭" : 컨트롤의 폭을 지정. type속성이 text이거나 password일 경우 문자수를 지정하고 그외의 경우에는 가로폭의 픽셀값을 지정한다.

• width : 요소의 가로사이즈를 지정합니다.

• height : 요소의 높이를 지정합니다.

• max : input요소에 허용하는 값의 최대값을 지정합니다.

• maxlength="최대 입력 문자수" : type속성이 text이거나 password일 경우 최대 입력 문자수를 지정한다.

• min : input요소에 허용하는 값의 최소값을 지정합니다.

 

 

 

6. select

• autofocus

  : 페이지를로드 할 때 해당 요소가 자동으로 포커스를 받도록 지정합니다.

• disabled

  : 포커스, 선택, 변경 등의 조작이 불가능하게하고 데이터도 서버에 전송하지 않습니다. 불리언 속성입니다.

• form

  : 다른 폼 소유자와 명시 적으로 연관시키기 위해 사용됩니다.

• multiple

  : 복수 선택 가능합니다. 불리언 속성입니다.

• name

  = "이름": 이름을 지정합니다.

• required

  : 필수 요소인지를 지정합니다. 불리언 속성입니다.

• size

  = "행수": 제공 할 목록 갯수를 지정합니다.

• option

  = 드롭다운 리스트 작성시 사용

 

 

7. <datalist>

다른 컨트롤을 위해 미리 정의된 옵션의 집합

select의 option과 비슷하다.

 

 

8. textarea

 

공백칸을 만든다.

텍스트 입력가능하다.

rows(가로)

cols(세로)로 조절가능하다

 

 

9. pattern

유효성 검사 때 필요한 속성으로

로그인 속성을 만들 때 필요하다.

ex)신용 카드 정보를 쓸시에

pattern="[0-9]{14,16}" input에 넣는다.

여기서 대괄호 0-9는 쓰는게 가능한 숫자범위이고, 중괄호 14, 16은

최소 14자리에서 16자리를 뜻한다.

만약 저런 긴 숫자양식이 아니라

로그인 시에 특수문자를 제외한 모든 숫자 문자 허용만을 하고 싶을땐,

"[a-zA-Z0-9]+"라고 표시한다. 여기서 "+"는 수량자로 [a-zA-Z0-9]에 패턴에 맞는 숫자가 반드시 1개 이상와야한다는 뜻이다.