form태그, input태그, input type

form 태그

사용자가 입력한 정보를 받을 때 가장 원초적으로 사용할 수 있는 html태그가 form태그와 form태그 내부에 자주사용되는 input 태그이다.
<form action="" method=""></form>

• action 속성 = 어디로 요청을 보내야하는지 경로
• method 속성 = 제출되었을 때 어떠한 방식으로 정보를 전달할지 방식을 정의
  ex)
  -get: 사용자가 입력한 정보를 url에 표시
  '어떤 페이지에 접속했는지 ? 사용자가 입력한 정보&사용자가 입력한 정보..' 출력
  -post: server에 action url로 요청을 보냄

input 태그

<input type="text" name="">

• name: input태그가 제출되었을 때 input태그에 담겨진 값을 확인하는 구분자로써 사용된다.
  따라서 웹사이트나 웹페이지의 구조에 따라서 필요하지 않을 수도 있다.
  하지만 일반적으로 form태그를 통해 전달되는 정보를 담고있는 역할을 하기 때문에 필수적인 속성이다.
• value: 사용자가 입력한 값이 value에 할당되게 됨. 예를들어, text, password와 같은 타입의 경우 value 값을 미리 입력해놓으면, 사용자에게 그 텍스트가 노출됨. 또한 사용자입력타입이 아닌 경우, 사용자의 선택 혹은 행위를 어떤 값으로 전송할지 입력할 수 있다.
• placeholder: placeholder=""
  사용자에게 어떠한 값을 입력해야하는지 알려주는 용도로 사용할 수 있다.
  사용자가 입력하게 되면 placeholder값이 사라진다.
  
  

input태그의 type 종류

1. password

password는 타입을 패스워드로 하여, 사용자가 어떠한 값을 입력했는지 공개되지 않게 하는 편이다.

<input type="password" name="password" value="mypassword">`

output

2. submit

버튼생성. value에 버튼에 들어갈 텍스트 입력. 사용자가 값을 입력하는 타입이 아니니 클릭만 할 수 있다.

<input type="submit" value="로그인">

output

버튼을 만드는 방법들

1. <input type="submit" value="로그인"> 버튼O 폼제출O
2. <input type="button" value="로그인"> 버튼O 폼제출X
3. <button type="submit">로그인</button> 로그인 버튼O 폼제출O
4. <button>로그인</button> 로그인 버튼O 폼제출O
5. <button type="button">로그인</button> 로그인 버튼O 폼제출X
   
   

input type="button" 과 button태그의 차이점

인풋태그의 버튼타입은 value라는 속성을 통해서 텍스트만 전달할 수 있다.
버튼태그는 여는태그와 닫는태그로 이루어져 있어서 태그 안에 또다른 태그를 넣을 수 있다.
예를들어, 버튼을 이미지로 만들고 싶을 때 버튼태그 안에 img태그를 넣어 이미지 컨텐츠를 삽입할 수 있다.

3. checkbox

<input type="checkbox" name="" value="">
사용자가 효과적으로 다중선택하기 위해서는 checkbox 여러개를 사용하는 것이 좋다. value속성을 통해 어떤 값이 전송될지 설정하는 것이 일반적이다.

ex.
모자: <input type="checkbox" name="kind" value="hat">
상의: <input type="checkbox" name="kind" value="top">
하의: <input type="checkbox" name="kind" value="bottom">

output
모자:
상의:
하의:

4. radio

동그란 체크박스 형태로 다중선택 가능하며
name을 통일시켜주면 하나만 선택 가능하다.

ex. 
여자: <input type="radio" name="gender" value="woman">
남자: <input type="radio" name="gender" value="man">

output
여자:
남자:

5. hidden

type="hidden"
폼을 통해서 사용자에게 보여지지않는 정보를 넣을 수 있다.
동일한 폼이 여러개 있거나 폼을 제출하면서 서버가 알아야할 정보가 있을 때 input태그의 타입을 hidden으로 하여 정보를 부가적으로 전달할 수 있다.
예를들어, 어느부분에서 많이 검색되었는지 분석할 수 있다.

ex.
<form action="./result.html" method="get">
<input type="text" name="text">
<input type="hidden" name="where" value="top_search"> <---
<input type="submit" value="제출">
</form>

output

그 외의 태그들

1. select 태그

obtion태그와 함께 사용된다. obtion을 통해서 지정해준 값들이 드롭다운 형태로 리스트되고, 사용자가 하나를 선택할 수 있다.

<select name="color" multiple></select>
select에 multiple 속성을 부여하면 사용자가 cntl키를 누른 상태에서 다중선택 가능하다. but cntl키를 통해 다중선택하는 것은 효과적이지는 않다.

ex.
<select name="color">
 <option value="red">빨간색</obtion>
 <option value="blue">파란색</obtion>
 <option value="green">초록색</obtion>
</select>

output
빨간색 파란색 초록색

2. label 태그

사용자에게 input태그에 대한 설명을 부여하고 싶을 때 사용한다.
라벨태그를 선택해도 input 타입 내용에 대한 선택, 입력이 될 수 있기때문에 효과적이다.

사용법1.
<label> 이메일 <input type="email" name="" id=""> </label>
이메일

사용법2.
labe태그의 for속성값과 input태그의 id값 통일시켜 연결시킬 수 있다.
<label for emmail> 이메일 </label> <input type="email" name="" id="email">
이메일

3. textarea 태그

사용자에게 장문의 텍스트를 받을 때 사용하는 태그이다. ex.게시판
placeholder속성 사용하여 어떤 내용을 입력해야하는지 전달할 수 있다.

textarea 크기 설정 방법 1. cols, rows

cols = textarea의 폭 (가로로 몇자가 들어갈 수 있는지)
rows = textarea의 길이 (세로로 몇줄 들어갈 수 있는지. 그 이상 작성하면 자동으로 스크롤 생긴다)

<textarea name="" id="" cols="30" rows="10"></textarea>

textarea 크기 설정 방법 2. style속성 width, height

<textarea name="" id="" style="width: 300px; height: 200px;"></textarea>

사용자가 textarea의 크기를 조절하지 못하게 하려면 resize: none

<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>