영역태그

span

데이터까지만 영역 - 사용했을 때 줄이 변경되지 않는다.
한 줄에서 데이터를 구분하는 용도로 사용.

나의 이름은 <sapn>진수현</span>입니다. 

div

web browser에 넓이 100%가 영역 - 사용했을 때 줄이 변경된다.
web page의 전체 디자인(구조 설정 - CSS와 함께 사용)을 설정할 때 사용.

안녀<div>하세요.</div>오늘은

HTML Form Control

사용자가 입력하는 값을 받기 위한 HTML에서 제공하는 객체들.

<input>, <select>, <textarea> 3가지의 객체를 제공.
<form>태그의 자식태그로 포함되어있을 때, 
접속자가 입력한 정보를 웹 서버로 전송할 수 있다.

input

type속성에 따라 제공되는 객체가 다르다.
공통속성 : name="이름", id="아이디", readonly="readonly", disabled="disabled", value="값", type="사용객체", class="클래스명"

* 텍스트
<input type="text" name="이름" id="아이디" class="클래스" 
size="넓이" maxlength="최대입력글자수" readonly="readonly"
diabled="disabled" value="보여질 글자(값 유지, back-end로 값이 넘어감.)" 
placeholder="보여질 글자(값 유지X, back-end로 값이 넘어가지 않음.)">

* 패스워드
<input type="password" name="이름" id="아이디" class="클래스" 
size="넓이" maxlength="최대입력글자수" readonly="readonly"
diabled="disabled" value="back-end로 전송될 값" checked="checked">

* 체크박스
<input type="checkbox" name="이름" id="아이디" class="클래스" 
size="넓이" maxlength="최대입력글자수" readonly="readonly" 
diabled="disabled" value="back-end로 전송될 값" checked="checked">

* 라디오 버튼
<input type="radio" name="이름" id="아이디" class="클래스" size="넓이" 
maxlength="최대입력글자수" readonly="readonly"
diabled="disabled" value="back-end로 전송될 값" checked="checked">

* hidden (눈에 보이지 않게 값을 back-end로 전송할 때.)
<input type="hidden" name="이름" id="아이디" value="back-end로 전송될 값">

* 파일
<input type="file" name="이름" id="아이디" class="클래스" size="넓이" 
readonly="readonly" diabled="disabled" (value 설정할 수 없음.)>

* 버튼
<input type="button" name="이름" id="아이디" class="클래스" 
readonly="readonly" diabled="disabled" value="버튼의 라벨">

* 초기화
<input type="reset" name="이름" id="아이디" class="클래스" 
readonly="readonly" diabled="disabled" value="버튼의 라벨">

* 제출
<input type="submit" name="이름" id="아이디" class="클래스" 
readonly="readonly" diabled="disabled" value="버튼의 라벨">

form

back-end로 값을 전송하기 위해 사용하는 태그.

<input type="submit"이 존재하고, 클릭되어야 back-end로 값이 전송된다.>

• 사용

<form action="값을 받을 back-end페이지 URL" name="이름" id="아이디" 
method="전송방식" 
 -Parameter를 어떻게 전송할 것인지
enctype="페이지 전송방식"
 -Parameter를 전송할 것인지, File을 전송할 것인지>

fieldset

form 태그의 영역을 식별하기 위한 테두리 선.

legend

titled border

label

라벨을 설정하는 태그

select

<select name = "이름" size="보여줄 옵션의 개수">
  <option value="전송할 값" selected="selected">보여줄값</option>
  <option value="전송할 값">보여줄값</option>
  <option value="전송할 값">보여줄값</option>
</select>

textarea

<textarea name = "이름" id="아이디" class="클래스" rows="보여줄 줄 수" cols="한줄에 쓸 글자수">보여줄 문자</textarea>

HTML5에서 추가된 태그들

<details> : 메시지를 제공하고 사용자가 메시지를 클릭하면, 숨겨놓은 제공할 내용을 열어서 보여주는 태그.
<details>
  <summary>사용자에게 보여줄 메시지</summary>
  <span>사용자에게 보여줄 내용</span>
</details>
  
<datalist> : 사용자가 클릭했을 대 준비된 여러 옵션을 보여주고, 옵션을 클릭하면 옵션의 값이 <input type="text">에 설정되는 객체
  
-리스트를 사용할 input 정의
<input type="text"/>
<datalist id="아이디">
  <option value="보여질 값"/>
  <option value="보여질 값"/>
</datalist>