HTML 정리 2

HTML 정리

---

폼 요소(form element)

<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.

<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다.

- <label>

- <input>

- <select>

- <textarea>

- <fieldset>

- <button>

- <option>

- <optgroup>

 

React나 Vue 같은 Single Page Application 에서는 form 테그는 사용하지 않는다.

데이터 입력시 화면전환이 일어나기 때문이다. 사용자에게 불편함을 초래함

화면 전환이 일어나지 않으려면 비동기적으로 통신을 하여야한다.

저장을 누르는 순간 데이터가 서버로 전송이 되기 때문임

 

<form> 태그의 action 속성

<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.

 

<label>

<label> 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용합니다.

 

<label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 또한, <label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다.

 

이러한 <label> 요소는 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.

 

<label> 요소를 사용할 수 있는 요소는 다음과 같습니다.

- <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>

<form action="">
  <label for="email">이메일</label>
  <input type="email" name="" id="email" />
  <br />
  <label for="pw">비밀번호</label>
  <input type="password" name="" id="pw" />
</form>

 

<input>

사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다. <input> 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용됩니다. 이러한 입력 필드는 <input> 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다.

input 요소에 들어 갈 수 있는 type
button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

 

<div>

HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다. <div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다. 또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다.

 

name

같은 이름을 가져도 상관없는 속성이다. 같은 이름을 주면 동일한 옵션 그룹인 것을 인지한다. 자바스크립트에서 name을 가져 쓰는 경우가 있다.

 

checkbox

다중 선택을 할 수 있다.

<div>
  <!-- id 값을 for에 넣는 순간 lable 문자를 눌러도 체크가 가능해진다. -->
  <input type="checkbox" name="chk_lang" id="chk_html" />
  <label for="chk_html">HTML</label>
  <input type="checkbox" name="chk_lang" id="chk_css" />
  <label for="chk_css">CSS</label>
  <input type="checkbox" name="chk_lang" id="chk_js" />
  <label for="chk_js">JavaScript</label>
</div>

 

radio

한가지만 선택할수 있다.

<div>
  <input type="radio" name="radio_lang" id="radio_html" />
  <label for="radio_html">HTML</label>
  <input type="radio" name="radio_lang" id="radio_css" />
  <label for="radio_css">CSS</label>
  <input type="radio" name="radio_lang" id="radio_js" />
  <label for="radio_js">JavaScript</label>
</div>

 

color, date, datetime-local

<div>
  <label for="favoriteColor">가장 좋아하는 색상은?</label>
  <input type="color" name="" id="favoriteColor" />
</div>
<div>
  <label for="bornDate">태어난 날짜는?</label>
  <input type="date" name="" id="bornDate" />
</div>
<div>
  <label for="arrivalDateTime">입국 날짜/시간은?</label>
  <input type="datetime-local" name="" id="arrivalDateTime" />
</div>

 

email

모바일에서 이메일을 보다 쉽게 입력할수 있는 자판으로 나온다.

submit 타입이 있는 순간 HTML이 입력된 값이 올바른지 확인을 해준다.

required와의 차이점은 아무것도 입력하지 않고 저장을 누른경우는 경고창이 나오지 않는다는 차이가 있다.

required를 넣으면 빈값을 넣고 저장을 누르면 경고창이 나옴

<div>
  <form action="">
    <label for="email">이메일 주소</label>
    <input type="email" name="" id="email" />
    <button type="submit">저장</button>
  </form>
</div>

required를 적용 하였을때

file

파일을 첨부 할 수 있다.

<div>
  <label for="attachment">파일 첨부</label>
  <input type="file" name="" id="attachment" />
</div>

 

hidden

<input type=“hidden”>은 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의합니다.

 

숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 그것을 볼 수 있게 만드는 방법도 없습니다. 따라서 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용됩니다.

 

이러한 입력 필드는 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용됩니다.

<input type="hidden" name="" />

 

image

<img>태그와 외형적으로는 같다. 차이점은 마우스 모양이 손가락 모양으로 바뀌고 클릭 이벤트를 사용하려고 만들어진 이미지로 인식

<div>
      <img src="./img/sample.jpeg" alt="" style="width: 100px" />
      <input type="image" src="./img/sample.jpeg" alt="" style="width: 100px" />
</div>

 

month, number, password, range, search

<div>
  <label for="yearmonth">년월</label>
  <input type="month" name="" id="yearmonth" />
</div>
<div>
  <label for="age">당신의 나이는?</label>
  <input type="number" name="" id="age" min="1" max="130" step="1" />
</div>
<div>
  <label for="pw">비밀번호</label>
  <input type="password" name="" id="pw" />
</div>
<div>
  <label for="">볼륨(0에서 50까지)</label>
  <input type="range" name="" id="" min="0" max="50" />
</div>
<div>
  <label for="search">검색</label>
  <input type="search" name="" id="search" />
</div>

 

tel

submit 타입이 있지만 전화번호 형식을 확인을 해주지 않는다. 나라마다 형식이 다르기 때문이다. 이를 지정해주기 위해서 pattern 속성에 정규식을 사용하여 형식을 지정해준다.

  <form action="">
    <label for="tel">전화번호</label>
    <input type="tel" name="" id="tel" pattern="^010-\d{4}-\d{4}" />
    <button type="submit">저장</button>
  </form>

 

text, time, url, week

<div>
  <label for="normal">일반문자</label>
  <input type="text" name="" id="normal" />
</div>
<div>
  <label for="visitTime">예약시간</label>
  <input type="time" name="" id="visitTime" />
</div>
<div>
  <form action="">
    <label for="blogUrl">블로그</label>
    <input type="url" name="" id="blogUrl" />
    <button type="submit">저장</button>
  </form>
</div>
<div>
  <label for="weekPlan">주간 계획</label>
  <input type="week" name="" id="weekPlan" />
</div>

 

input 테그의 주요 속성

---

value : 사용자가 입력한 값은 value라는 속성에 들어간다.

readonly : 읽을 수만 있다.

disabled : readonly와 차이점은 value값이 서버에 전송이 되지 않는다.

maxlength : 입력 개수 조절

<div>
  <input type="text" name="" id="" value="ABC" />
</div>
<div>
  <input type="text" name="" id="" value="ABC" readonly />
</div>
<div>
  <input type="text" name="" id="" value="ABC" disabled />
</div>
<div>
  <input type="text" name="" id="" maxlength="4" />
</div>

 

placeholder : 입력창에 사용자에게 가이드를 하기 위해 사용

<div>
  <input
    type="tel"
    name=""
    id=""
    placeholder="하이프(-) 없이 숫자만 입력하세요."
  />
</div>

required : 필수 입력값이라는 의미. 입력창에 아무것도 넣지 않으면 넣으라고 알려준다.

<div>
  <form action="">
    <label for="userId">아이디</label>
    <input type="text" name="" id="userId" required />
    <button type="submit">저장</button>
  </form>
</div>

autocomplete : 내가 입력했던 값들을 브라우저 메모리에 저장해 있다가 선택지로 나오게 된다.

name
브라우저에 저장되는 정보는 name 속성의 값에 영향을 받고, 자동 완성 기능을 사용할 수 있는 미리 정의된 name 값이 있습니다.

● email : 이메일 주소
● name : 사람의 전체 이름
● email : 이메일 주소
● username : 사용자 계정
● language : 선호 언어
● sex : 성별
● tel : 국가 코드를 포함한 전체 전화번호
● url : 웹사이트 주소

<div>
  <input type="text" name="name" id="" autocomplete="on" />
</div>

 

---

<select>

선택지가 많은 경우 사용하기 좋다. 화면에 적은 공간을 차지한다.

<select name="" id="city" value="">
  <option value="1">서울</option>
  <option value="2">부산</option>
  <option value="3">대전</option>
  <option value="4">대구</option>
  <option value="5">광주</option>
  <option value="6">제주</option>
</select>

---

<textarea>

<div>
  <textarea name="" id="" style="width: 100%" rows="5"></textarea>
</div>

 

<fieldset>

<fieldset> 태그는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다.

<fieldset> 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줍니다.

또한, <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있습니다.

<div>
  <fieldset>
    <legend>개인정보</legend>
    <div>
      <label for="username">이름</label>
      <input type="text" name="" id="username" />
    </div>
    <div>
      <label for="tel">연락처</label>
      <input type="tel" name="" id="tel" />
    </div>
  </fieldset>
</div>

 

<form> 태그의 method 속성

<form> 태그의 method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다.

 

method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.

 

get
url에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.
url에 전송하는 데이터가 노출이 되고 전송할 수 있는 데이터 크기가 제한이 있음.
쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
브라우저에 의해 캐시되어(cached) 저장됩니다.
보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다. 

주소에 데이터 노출

post
폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
쿼리 문자열과는 별도로 전송됩니다. 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.
데이터가 노출 되지 않고, HTTP 요청의 body에 데이터를 담아서 전송되고 전송할 수 있는 데이터 크기에 제한 없음  
URL에 전송하는 데이터가 노출되지는 않지만, 결국은 개발자 도구 같은 소프트웨어를 통해서 전송하는 데이터를 확인할 수 있습니다. 그러므로 전송하는 데이터는 암호화하는 것이 좋습니다. 예를들어 https 프로토콜 사용.

 

main.html

 

<button type="submit">저장</button>을 누르는 순간 이 페이지에 입력된 정보들이 test.html로 넘어가게 된다.

서버를 연결시켜 서버에 보내야 하지만 임시로 test.html 사용.

name값을 입력해줘야 그 name 값으로 데이터가 전송이 된다.

<form action="./test.html" method="get" target="">
  <fieldset>
    <legend>개인 정보</legend>
    <div>
      <label for="username">이름:</label>
      <input type="text" name="username" id="username" />
    </div>
    <div>
      <label for="tel">연락처:</label>
      <input type="tel" name="telephone" id="tel" />
    </div>
    <button type="submit">저장</button>
  </fieldset>
</form>

test.html

<body>
<script></script>
</body>

F12 개발자 도구의 네트워크에서 데이터가 넘어가는 것을 볼 수 있다.

 

<datalist>

<datalist> 태그는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용합니다.

<datalist> 요소는 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공합니다.

<input> 요소의 list 속성값으로 <datalist> 요소의 id 속성값을 명시하면, 해당 <datalist> 요소에서 미리 정의한 옵션들을 <input> 요소에서 사용할 수 있습니다.

select 테그와 유사하지만 검색이 가능하다는 차이점이 있다.

단점으로는 사용자 검색기능이 가능하여 오타나 잘못된 입력이 들어갈 수 있다.

<div>
  <input list="browsers" id="broswer1" />
  <datalist id="browsers">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
  </datalist>
</div>

 

참고자료

http://www.tcpschool.com/html-tags/div