TIL 03 | HTML Form Tags

1. Form Tags

• form: 사용자로부터 특정한 정보나 데이터를 받고자 할 때 사용(이때 사용자는 client, 데이터를 받는 쪽은 server를 뜻함. 결론적으로 서버에게 데이터를 전송하기 위해 사용)

• 사용자들에게 단순히 정보를 제공하는 이전 태그와들과는 다른 목적을 갖고 있음

• action = "주소" : API 주소, 즉 해당 form를 처리할 서버 쪽 친구에게 접근이 가능한 url

• method = "" : 데이터를 전송하는 방식에 따라 GET 방식, POST 방식로 나뉜다.

• method = "GET" : url에 사용자 정보가 담겨서 전송, 전송할 수 있는 정보의 길이가 제한됨, 퍼머링크로 사용됨(퍼머링크: 정보를 식별하는 고유의 식별자, 고유의 주소 체계를 뜻함).

• method = "POST" : url 상에 전달한 사용자 정보가 표시되지 않음, 전송할 수 있는 데이터 길이 제한X, 퍼머링크로 사용될 수 없음.

• GET, POST 는 (서버 쪽이 관련되어 있기 때문에 GET | POST 차이에 대해서 다시 언급하도록 하겠다.)

<form action = "" method = "">홍길동</form>

1. Form - Input

• <input>: 사용자가 특정 정보를 전달하기 위해 입력하는 태그

• type별로 다양한 정보를 전송할 수 있음(text,email,password,number,file 등등..)

• required: 텍스트 내용 입력이 필수일 때 사용하는 속성값

• placeholder = "내용": 텍스트 입력 칸에 짧은 도움말을 부여하는 속성값

<form action="#" method="POST">
  <label for="first">텍스트</label>
  <input type="text" name="" id="first" required placeholder="입력하시오" />
  <button type="submit">제출</button>
</form>
<form action="#" method="POST">
  <label for="second">메일</label>
  <input type="email" name="" id="second" required placeholder="입력하시오" />
  <button type="submit">제출</button>
</form>
<form action="#" method="POST">
  <label for="third">비밀번호</label>
  <input type="password" name="" id="third" required placeholder="입력하시오" />
  <button type="submit">제출</button>
</form>
<form action="#" method="POST">
  <label for="fourth">숫자</label>
  <input type="number" name="" id="fourth" required placeholder="입력하시오" />
  <button type="submit">제출</button>
</form>
<form action="#" method="POST">
  <label for="fifth">파일</label>
  <input type="file" name="" id="fifth" required placeholder="입력하시오" />
  <button type="submit">제출</button>
</form>

텍스트 제출 메일 제출 비밀번호 제출 숫자 제출 파일 제출

2. Form - Label

• <label>: 원하는 <input> 값에 이름을 붙일 때 사용

• for 속성값을 <input> 태그의 id 속성값과 동일하게 기입

<label for="one">텍스트</label>
<input type="text" name="" id="one">

텍스트 <- 클릭시 input창으로 포커싱

3. Form - Radio & Check-box

• <input type = "radio">: 라디오 버튼

• 다중 선택이 가능하나 동일한 name 값을 부여할 시, 한 가지만 선택 가능, 즉 연관있는 항목들끼리 묶음

<form action="" method="POST">
  <label for="subscripted">구독</label>
  <input type="radio" name="" id="subscripted" />
  <label for="unsubscripted">미구독</label>
  <input type="radio" name="" id="unsubscripted" />
  <button type="submit">제출</button>
</form>
<form action="" method="POST">
  <label for="subscripted">구독</label>
  <input type="radio" name="subscription" id="subscripted" />
  <label for="unsubscripted">미구독</label>
  <input type="radio" name="subscription" id="unsubscripted" />
  <button type="submit">제출</button>
</form>

다중선택: 구독 미구독 제출 단일선택: 구독 미구독 제출

• <input type = "check">: 체크박스

• name = "": 체크박스 끼리 관련있음을 알리기 위해 사용하는 속성값

• value = "": 선택한 체크박스가 무엇인지 서버에게 알려주는 속성값

• checked: 체크박스가 미리 선택되게 하는 속성값

<form action="#" method="post">
  <label for="HTML">HTML</label>
  <input type="checkbox" name="skills" id="HTML" value="HTML" />
  <label for="CSS">CSS</label>
  <input type="checkbox" name="skills" id="CSS" value="CSS" />
  <button type="submit">제출</button>
</form>

HTML CSS 제출

4. Form - Select & Option

• <select>: pull down 메뉴를 생성

• <option>: pull down 리스트 항목 생성

• name = "": <option> 태그들의 그룹화를 위해 필수로 지정하는 속성값

• value = "": 리스트 항목간 구별하기 위해 사용하는 속성값

• multiple: 다중 선택이 가능하게 하는 속성값(선택 후 드래그)

<form action="#" method="post">
  <label for="clothes">사이즈</label>
  <select name="size" id="clothes">
    <option value="small">S</option>
    <option value="medium">M</option>
    <option value="large">L</option>
    <option value="xlarge">XL</option>
  </select>
  <button type="submit">제출</button>
</form>
<form action="#" method="post">
  <label for="clothes">사이즈</label>
  <select name="size" id="clothes" multiple>
    <option value="small">S</option>
    <option value="medium">M</option>
    <option value="large">L</option>
    <option value="xlarge">XL</option>
  </select>
  <button type="submit">제출</button>
</form>

단일 선택: 사이즈 S M L XL 제출 다중 선택: 사이즈 S M L XL 제출

5. Form - Textarea

• <textarea>: 여러줄에 걸친 정보를 입력할 때 사용하는 태그

• cols: 열

• rows: 행

<form action="#" method="post">
  <label for="area">텍스트영역</label>
  <textarea name="" id="area" cols="30" rows="5" placeholder="입력하세요"></textarea>
  <button type="submit">제출</button>
</form>

텍스트영역 제출

6. Form - Buttons

• <button>: 버튼 생성 태그

• type = "button": 아무 기능 없는 버튼

• type = "submit": <form>태그에 담긴 내용을 전달하고자 할 때 사용

• type = "reset": 입력값을 초기화하는 속성값

<form action="#" method="post">
  <label for="텍스트">텍스트입력</label>
  <input type="text" id="텍스트" />
  <button type="button">그냥 버튼</button>
  <button type="submit">제출</button>
  <button type="reset">리셋</button>
</form>

텍스트입력 그냥 버튼 제출 리셋

2. 마무리

다음에는 semantic web, semantic markup에 대해서 알아보자!