[HTML] <form> 관련 html tag, 이미지 관련 html tag

<form> 관련 HTML Tag

 

<form> 속성

method

양식을 제출 할 때 사용할 http 메소드. 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.

속성 값

• get : 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송한다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256-4,096byte의 데이터만 넘길 수 있다.
• post : 양식 데이터를 요청 본문으로 전송한다. 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
• dialog : 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫는다.

name

폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우 서로 구분하기 위해 사용한다.

HTML 4부터 사용이 중단됐다. id를 사용해야한다.

 

action

양식 데이터를 처리할 프로그램의 URI. <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.

 

target

양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름.

• _self : 보고있던 현재 브라우징 맥락에 표시한다. (기본값)
• _blank : 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다.
• _parent : 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동한다.
• _top: 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동한다.

 

novalidate

지정한 경우 양식의 유효성 검증을 건너뛴다.

---

<label>

폼 요소에 레이블을 붙이는 태그. 라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼과 체크 박스 버튼이 선택된다.

 

<fieldset>

폼 요소를 그룹으로 묶는 태그. 웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용한다. 그룹을 만들 수 있으며 <legend>요소로 그룹의 설명을 제공할 수 있다.

 

<legend>

그룹으로 묶는 구역에 제목을 붙이는 태그.

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

---

<select>

옵션 메뉴를 제공하는 컨트롤을 나타낸다.

• size : 스크롤 가능한 목록 상자로 표현할 때 지정한 경우, 목록에서 한 번에 볼 수 있는 옵션 줄 수를 나타낸다. 기본값은 0이다. (크롬 브라우저의 경우 지정한 개수보다 하나 더 많은 옵션이 표시된다.)
• multiple : 드롭다운 메뉴에 있는 여러 항목을 동시에 선택할 수 있다. 대부분 브라우저는 이 특성이 존재하면 드롭다운 메뉴 대신 스크롤 가능한 목록 상자를 보여준다.
• disabled : 지정한 경우, 사용자와 <select> 요소의 모든 상호작용을 막는다.

 

<optgroup>

<optgroup>안에 <option> 요소를 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있다. <optgroup> 요소는 중첩할 수 없다.

label 속성을 사용해 그룹 제목을 붙인다. 필수로 지정해야 한다.

 

<option>

<select>, <optgroup>, <datalist> 요소의 항목을 정의한다. 

• value : 양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용한다.
• label : 사용자를 위해 브라우저에 표시하는 텍스트. 따로 지정하지 않을 경우, 요소의 텍스트 콘텐츠를 대신 사용한다.
• selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.
• disabled : 지정한 경우 이 옵션을 선택할 수 없다.

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

 

<datalist>

다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소를 여럿 담는다.

데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력된다.

데이터 목록에 id를 이용해 이름을 붙이고, <input> 태그의 list 속성에 데이터 목록 id를 지정한다.

<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

---

이미지 관련 HTML Tag

<figure>

설명글을 붙일 대상을 지정한다.

웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. 설명 글을 표시할 때 <figure>로 먼저 묶어야 한다.

 

<figcaption>

대체 텍스트를 화면 낭독기가 읽어 준다. 이미지를 표시할 수 없는 상황일 때 대체 텍스트를 표시한다.

 

<figure>
  <img src="images/img1.png" alt="이미지">
  <figcaption>이미지 캡션</figcaption>
</figure>

---

<area>

이미지의 영역을 정의하고 하이퍼링크를 추가할 수 있다. 이미지 맵을 만들때 사용된다. <map> 요소 안에서만 사용할 수 있다.

<map name="mapname">
  <area>
  </area>
</map>

<img src="image1.png" usemap="#mapname">

 

<area> 속성

• alt : 대체 텍스트를 지정한다. href 특성이 존재할 경우 필수 사항이다.
• coords : 링크로 사용할 영역의 시작 좌표와 끝 좌표를 이용해 지정한다. 값의 수와 의미는 shape속성에 따라 달라진다.
• download : 링크를 클릭했을 때 링크 문서를 다운로드한다.
• href : 링크 경로를 지정한다. 생략할 경우, 이 <area> 요소는 하이퍼링크를 나타내지 않는다.
• hreflang : 연결한 리소스의 언어를 나타낸다. href 특성이 존재할 때만 사용한다.
• rel : 현재 문서와 링크 문서 사이의 관계를 지정한다.
• shape : 링크로 사용할 영역의 형태를 지정한다. (rect, circle, poly, default(기본값))
• target : 링크를 표시할 대상을 지정한다.