HTML Forms & Graphics

Form

Form - <input>

<input> element는 type attribute에 의존하여 많은 방법으로 나타내 진다.

 

Type	설명
<input type="text">	Displays a single-line text input field
<input type="radio">	Displays a radio button (for selecting one of many choices)
<input type="check">	Displays a checkbox (for selecting zero or more of many choices)
<input type="button">	Displays a clickable button
<input type="submit">	Displays a submit button (for submitting the form). action 속성에서 구체화된다
<input type="password">	Defines a password field
<input type="reset">	Defines a reset button that will reset all form values to their default values
<input type="date">	Used for input fields that should contain a date
<input type="file">	Defines a file-select field and a "Browse" button for file uploads
<input type="range">	Defines a control for entering a number whose exact value is not important
<input type="tel">	Used for input fields that should contain a telephone number

 

 

 

 

 

<label>

<label>은 몇몇의 form elemets을 위한 라벨을 정의한다.

 

그리고 screen-reader 유저들에게 유용한데, 그 사용자가 input element에 초점을 맞출 때 화면 표시기가 라벨을 크게 판독하기 때문이다.

 

또한 <label>은 radio 버튼이나 checkboxes 같은 작은 구역을 클릭할 때 어려움을 겪는 사용자들을 돕는다.  그들이 <label> element 내의 텍스트를 클릭하면 라디오 버튼/메모리를 토글 하기 때문이다.

 

<label>에 대한 for의 속성은 <input>의 id 속성과 같아야 한다.

 

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

 

 

 

 

Input Attributes

 

• value

<form>
  <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">
</form>

input value 속성은 input field의 초기 값을 설정한다.

 

 

 

 

• readonly

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

read-only 부분은 변경될 수 없다. 하지만 사용자는 텍스트를 tab, highlight, copy 할 수 있다.

 

 

 

 

• disabled

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

 

disabled input field는 사용할 수 없고 클릭할 수 없다. 또한 양식을 제출할 때 비활성화된 입력 필드 값이 전송되지 않는다.

 

 

 

 

• size

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

input field의 눈에 보이는 너비를 문자로 지정한다. (default 20)

참고: 크기 특성은 text, search, tel, url, email, and password 입력 유형과 함께 작동한다.

 

 

 

 

• min, max

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

min 및 max 속성은 number, range, date, datetime-local, month, time and week 등의 입력 유형에서 작동한다. 

 

 

 

 

• multiple

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

이것은 한 개 이상의 값을 넣을 수 있게 해준다.

 

이것은 email과 file 입력 유형에서 작동한다.

 

 

 

 

• pattern

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

 이것은 form을 제출할 때 입력 필드 값을 확인하는 정규식을 지정한다.

패턴 속성은 text, date, search, url, tel, email, and password의 입력 유형과 함께 작동한다.

 

 

 

 

• placeholder

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

input field의 예상 값(예상 form에 대한 샘플 값 또는 간단한 설명)을 설명하는 짧은 힌트를 지정한다.

사용자가 값을 입력하기 전에 입력 필드에 짧은 힌트가 표시된다.

자리 표시자 속성은 text, search, url, tel, email, and password의 입력 유형과 함께 작동한다.

 

 

 

 

• required

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

반드시 입력해야 하는 부분을 지정할 때 사용하는 속성이다.

 

 

 

 

• step

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

입력 단계 특성을 사용하여 입력 필드에 대한  수 간격을 지정한다.

ex) 만약 step="3", 0을 포함한 3의 배수의 숫자만 입력할 수 있다.

 

 

 

 

• autofocus

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

 

 

 

 

• autocomplete

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

form 또는 input field의 자동 완성 켜기 또는 끄기 여부를 지정한다. 

자동 완성은 브라우저가 값을 예측할 수 있도록 한다. 사용자가 필드에 입력을 시작할 때, 브라우저는 이전에 입력된 값에 기초하여 필드를 채우는 옵션을 표시해야 한다.

 

 

 

 

 

 

Form Attributes

• form 

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

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

input form 속성은<input> element가 속한 form을 구체화한다.

 

 

 

 

• formaction

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

input formaction 속성은 form을 제출할 때 입력을 처리할 파일의 URL을 지정한다.

 

이 속성은 <form> 속성의 action 속성을 재정의한다.

 

 

 

• formenctype

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

input formenctype 속성은 제출 시 form-data를 인코딩하는 방법을 지정한다(method="post"가 있는 형식만).

 

이 속성은 <form> 속성의 enctype 속성을 재정의한다.

 

 

 

 

• formmethod

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

input formmethod 속성은 form-data를 action URL로 전송하는데 사용되는 HTTP method를 정의한다.

 

 

 

 

• formtarget

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

input formtarget 속성은 form 제출 후 수신되는 응답을 표시할 위치를 나타내는 이름 또는 keyword를 지정한다.

 

submit, image 와 함께 작용된다.

 

 

 

 

• formnovalidate

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

input formnovalidate 속성은 제출될 때 <input> 요소의 유효성을 검사해서는 안 된다는 것을 명시한다.

 

 

 

 

• novalidate

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

 

novalidate는 제출되었을 때 모든 form-data가 검증되지 않아야 한다고 명시한다.

 

 

 

 

Graphics

Canvas Graphics

- canvas 요소는 웹 페이지에 그래픽을 넣어주는 쉽지만 강력한 방법을 제공해 준다. 이 요소는 그래픽을 위한 container 역할만 수행하기 때문에 JavaScript 등의 스크립트 언어를 이용해야 한다.

 

 

- canvas 요소는 border(테두리)나 content(내용) 도 없는 웹 페이지 내의 단순한 사각형 모양의 공간이기 때문에 반드시 style 속성을 이용해 canvas 크기를 설정해 주어야 한다.

 

   canvas 요소를 script에서 접근하기 위해서는 해당 요소의 id속성을 이용하면 된다.

 

 

 

- canvas를 정의한 후에는 script를 이용해 canvas 요소에 그래픽을 그릴 수 있다.

context.strokeRect(10, 10, 250, 130);

context.fillStyle = "rgba(255,0,0,1)";

context.fillRect(20, 20, 200, 100);

context.clearRect(30, 30, 150, 50);

위의 코드에서 사각형을 그리는 데 사용되는 각 함수들은 다음 순서대로 인수를 전달받는다. 

 

   1) 사각형의 왼쪽 위 꼭짓점의 x좌표

   2) 사각형의 왼쪽 위 꼭짓점의 y좌표

   3) 사각형의 너비

   4) 사각형의 높이

 

 

- 아래의 코드는 script를 이용해 canvas 요소에 이미지를 그리는 예제이다.

 

<p><button onclick="drawImage()">이미지 그리기</button></p>

...

<script>

    function drawImage() {

        var srcImg = document.getElementById("Monalisa");

        context.drawImage(srcImg, 10, 10);

    }

</script>

 

위의 코드에서 사용된 drawImage() 함수는 다음 순서대로 인수를 전달 받는다.

 

   1) canvas 요소에 그릴 이미지의 주소

   2) 이미지의 왼쪽 위 꼭짓점의 x좌표

   3) 이미지의 왼쪽 위 꼭짓점의 y좌표

 

 

 

 

SVG Graphics

svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다.

 

기존에 사용해온 canvas 요소로는 vector 이미지를 표현할 수 없었으나, svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다. 따라서 이 요소는 도표나 그래픽 등 벡터 기반의 다이어그램을 표현하는데 매우 효과적이다.

 

 

<svg width="200" height="150">

    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>

    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!

</svg>

 

위의 코드는 rect 요소를 사용해서 사각형을 그리는 예제이다. 

 

 

그리고 아래의 코드와 같이, rect 요소에 x, y, rx, ry 속성을 추가해서 모서리가 둥근 사각형을 그릴 수 있다.

<svg width="250" height="200">

    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"

        stroke="orange" stroke-width="5" fill="yellow"/>

</svg>

 

 

 

Canvas vs SVG

canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다. 경우에 따라 어떤 것을 사용하는지가 더 나을 수 잇다.

 

- canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많은 경우(>10k),

 

   svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k) 사용하는 것이 좋다. 

 

Canvas	SVG
pixel 기반	shape(모양) 기반
단일 HTML 요소	DOM 의 일부분이 되는 다중 그래픽 요소
script를 통해서만 수정 가능	script or CSS 통해서도 수정 가능
그래픽이 주작업인 게임에 적합	렌더링 영역이 넓은 응용 프로그램에 적합

 

 

 

 

(내용 출처: www.w3schools.com)