[Lab2] HTML Form/Graphics

HTML Form

<form> 태그 안에 전송하고자 하는 정보를 입력 받아 전달 할 수 있다.

태그	설명
<input type="text">	텍스트 입력
<input type="radio">	여러 항목 중 하나 선택
<input type="checkbox">	0개 이상의 선택
<input type="submit">	제출 버튼 표시
<input type="button">	클릭 가능한 버튼 표시

 

target

태그	설명
_blank	새 탭 또는 새 창에 표시
_self	현재 창에 표시
_parent	상위 프레임에 표시
_top	창의 전체 본문에 표시
framename	framename 의 이름을 가진 iframe에 표시

 

method

- 입력 데이터를 제출할 때 HTTP 메소드 설정하는 것

- get 또는 post로 전송할 수 있다. (디폴트 값: GET)

 

autocomplete

- 양식 자동완성 기능

- on 또는 off 로 설정할 수 있다.

 

novalidate

- 입력 데이터 제출 시 유효성 검사 (boolean attribute)

- 그냥 novalidate 로 태그 표시

<form action="/action_page.php" novalidate>

 

select

- 아래로 펼쳐지는 선택지 중 하나를 선택할 수 있게 한다.

- option 으로 선택지를 만들 수 있다.

- size를 선택해 한 번에 보이는 선택지의 개수를 조절할 수 있다.

<label for="books">Choose your favorite genre:</label>
<select id="books" name="books" size="3">
<option value="classics">Classics</option>
<option value="mystery">Mystery</option>
<option value="fantasy">Fantasy</option>
</select>

 

textarea

- 여러줄의 텍스트를 쓸 수 있는 영역

 

button

- 버튼 클릭 시 동작 지정 가능

<button type="button" onclick="alert('Thank you for your opinion :)')">Comment</button>

 

fieldset

- form 작성 시 관련 데이터들끼리 그룹화하는데 사용

 

legend

- fieldset 요소의 캡션(제목)을 정의

 

datelist

- 텍스트 입력 가능한 폼을 제공할 때 사전 정의된 선택지도 제공

 

 

---

HTML Graphics

 

자바스크립트

- <script> 태그로 코드 시작

<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>

코드 실행 결과

 

svg

- SVG 그래픽을 위한 컨테이너

- path, box, 원,  텍스트, 그래픽 이미지를 그릴 수 있다.

<circle cx="50" cy="50" r="40" stroke="darkkhaki" stroke-width="4" fill="palevioletred" />

코드 실행 결과