Formtag 폼 태그 필수속성, Input type 정리(1)

 Formtag(폼태그) & input tag(인풋태그)
 

Formtag 폼 태그

아이디, 패스워드, 전화번호, 이메일, 회원가입 양식 등 웹사이트로 정보를 보낼 수 있는 모든 요소(element)를 폼(양식)이라 합니다.
폼태그는 로그인 화면이나 회원가입 화면에서 쉽게 볼 수 있는 '입력할 수 있는 틀'을 만드는데 사용되는 태그입니다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.
type 속성을 통해 양식의 종류를 나타내며, name으로 데이터의 이름, value를 통해 기본 값을 지정합니다.

Input tag 인풋 태그

사용자에게 입력을 받을 수 있는 필드를 만들 수 있는 태그로, 폼태그 중 가장 사용빈도수가 높은 태그입니다. input 태그는 따로 닫는 태그가 없으며 필수속성으로 type 을 입력해주어야합니다.
id 속성 : 똑같은 폼 요소를 여러 번 사용할 때, 요소를 구분하기 위해 id로 서로 다른 이름을 줍니다.
type 속성 : input 태그로 넣을 수 있는 유형

  

---

input type 종류

1.type (필수속성)            

text - 일반 문자
password - 비밀번호
button - 버튼
submit - 양식 제출용 버튼

imagesubmit - 이미지 버튼
reset - 양식 초기화용 버튼
radio - 한개만 선택할 수 있는 컴포넌트. 디폴트 모양은 원형
checkbox - 다수(1개 이상)를 선택할 수 있는 컴포넌트. 디폴트 모양은 사각형
file - 파일 업로드
hidden - 사용자에게 보이지 않고 서버로 넘기는 값
text - 한 줄 짜리 텍스트 상자
search - 검색 상자
tel - 전화번호 필드
url - URL 필드
email - 이메일 필드
password - 비밀번호 필드
datetime - 국제 표준시의 날짜와 시간(연,월,일,시,분,초,분할초)
datetime-local - 사용자가 있는 지역의 날짜와 시간
date - 사용자 지역의 날짜 年、月、日
month - 사용자 지역의 날짜　年、月
week - 사용자 지역의 날짜　年、週
time - 사용자 지역의 시간　時、分、秒
number - 수량 선택 등, 숫자를 조절할 수 있는 화살표가 디폴트로 오른쪽에 상,하로 나옴
range - 숫자를 조절할 수 있는 슬라이드 막대
color - 색상표. 클릭하면 컬러피커가 나옴

---

자주 쓰이는 input tag 예시

1. type="text"

textarea와 달리 입력란에 한 줄까지만 입력가능합니다name - 텍스트 필드를 구분하기 위한 이름size - 화면에 몇 글자가 보이도록 할 것인지 지정.value - 텍스트 필드 부분에 표시될 내용. value 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.maxlength - 최대 문자 개수 지정

2. type="password"는 비밀번호 입력란에 내용을 입력하면 입력한 내용이 화면에 특수문자로 표시됩니다

<fieldset>
      <label>아이디:<input type="text" id="user_id" size="10"></label>
      <label>비밀번호:<input type="password" id="pw" size="10"></label>
</fieldset>

fieldset : form양식에서 관계된 양식끼리 묶어주며, 관계된 요소들 주의에 박스를 그려줍니다. 필드셋은 주로 legend와 함께 사용됩니다. 

label : 입력란을 설명하는 이름표(라벨)입니다. 레이블 안에 "아이디"라는 텍스트와 "text" 타입의 인풋태그가 함께 속해있으므로, "아이디" 텍스트를 클릭해도 text 입력란이 활성화됩니다.

size : 화면상에 몇 글자까지 보이도록 할 것인지 지정합니다. size="10" = 최대 10글자까지 보이게됩니다.

아이디: 비밀번호:

 

---

 

 

 

<label>성명 : <input type="text" name="성명" size="10" maxlength="5" value="kimnaa" placeholder="이름을 입력하세요"></label>

성명 :

maxlength : 입력 문자열의 최대 길이를 문자 단위로 지정하거나, 더 정확히 말하면 코드 단위로 지정합니다. 

placeholder : 안내 문구(힌트). 입력란에 무엇을 입력해야하는지 알려주는 역할을 합니다. 보통 화면에 회색 글씨로 표시되며 입력 시에 사라집니다.

---

 

<label>비밀번호 : <input type="password" name="암호" placeholder="암호를 입력하세요"></label>

비밀번호 :

 

 

 

 

 

3. type="search" 는 말 그대로 검색란입니다. 

4. type="button" 은 css style을 이용하여 다양하게 스타일을 줄 수 있으며, 아이콘으로 대체할 수 있습니다.

<input type="search" name="검색"> <input class="btn btn-primary" type="button" value="검색" name="검색버튼">

▼

 

5. type="tel" 은 입력한 숫자를 전화번호로 인식합니다.

<label>전화번호 <input type="tel" name="전화번호"></label>

전화번호

 

6. tyle="url" 은 링크주소를 입력할 수 있는 란으로, 반드시 https://로 시작해야합니다.

<label>주소입력 <input type="url" name="링크주소" placeholder="주소를 입력하세요"> </label>

주소입력

 

7. type="email" 이메일주소를 입력하는 필드입니다.

autofocus : 입력란에 마우스를 올려놓을 필요없이 미리 지정된 input 태그에 내용을 입력할 수 있도록 활성화해주는 속성입니다. 

<label>메일주소 <input type="email" name="메일주소입력" placeholder="이메일을 입력하세요" autofocus> </label>

메일주소

 

8. type="date" 날짜를 선택할 수 있는 속성입니다. 박스를 클릭하면 날짜 선택창이 나옵니다. 기본은  "----년 --월 --일" 형식이며, 이외에도 다양한 날짜 형식을 나타내는 속성이 있습니다.

<label>날짜를 선택하세요<input type="date" name="date_select"></label>

날짜를 선택하세요

<input type="month" name="연월" value="속성">

▼

 

기본 형식인 "---년 --월 --일" 을  영어로 바꾸거나 "--일 --월 ----년" 등 순서 등을 변경할 수 있는 공식적인 명령어는 없습니다. 약간의 js를 이용하여 억지로 변경하는 것만 가능합니다.

<input type="week" name="주" value="속성">

▼