HTML Forms & Graphics

Forms

• form & /form 태그는 user에게서 정보를 받기 위해 사용한다.

input tag

: type에 따라 많은 방법으로 사용된다.(닫는 태크 없음)

• type 종류

  • text: 글자로 간단한 내용을 입력받을 때
    * <--> textarea는 하나의 태그: <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
  • radio: 하나만 선택하는 객관형
  • checkbox: 복수 선택 가능한 객관형
  • button: 버튼 모양 생성
  • submit: 제출 버튼 모양 생성
  • range
  • time
  • date
  • reset: default value로 바꿈

• 속성
  * readonly

  • disabled: 해당 input 요소가 비활성화됨을 명시
    (폼 데이터가 제출될 때도 disabled 속성이 명시된 input 요소의 데이터는 제출되지 않습니다)
  • pattern
  • placeholder
  • required
  • autofocus
  • step

label

: 폼의 양식에 이름을 붙이는 태그

• label의 for의 값과 양식의 id값이 같으면 연결
  --> label 클릭시, 연결된 양식에 입력 혹은 체크 가능

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

First name:

select

• selected를 쓰면, 그 항이 default값이 된다.

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi" selected>Audi</option>
  </select>
  <input type="submit">
</form>

Choose a car: Volvo Saab Fiat Audi

fieldset, legend

• fieldset: 관련있는 데이터들을 하나로 묶는 것
• legend: 그 group의 제목

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Personalia: First name:

Last name:

datalist

:input 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공

• input의 list값 = datalist의 id값 ==> input에서 datalist 사용 가능

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

output

:웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소

• for 속성: 스페이스로 구분한, 다른 여러 요소 id의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냄

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

+ = 60

output의 값, 이름, 콘텐츠는 양식 전송시 제출되지 않음

optgroup

: option 들을 종류별로 묶어주는 태그

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Choose a car: Volvo Saab Mercedes Audi

Form Tag 속성

• formaction: form 요소의 action 속성값을 재정의(overriding)
• formenctype: 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시
• formmethod
• formtarget

---

HTML Canvas Graphics

canvas

• canvas태그는 자바스크립트를 통해 다양한 그림을 그릴 수 있는 공간을 제공
• 해상도 독립적으로 SVG 그래픽을 활용하고 있어 그래프를 그리거나 이미지를 실시간으로 그려서 사용할 수 있는 기능 제공

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

SVG

Scalable Vector Graphics

• 벡터를 기반으로 그래프를 그린다
• 벡터 기반의 그래픽은 각 요소의 좌표를 조합하여 그림을 그리게 된다.
• 작은 데이터로도 도형을 그릴 수 있으며, 해상도가 바뀌거나 도형을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다.

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>