HTML Forms / Graphics / Media

[HTML Forms]

<form>

• action attribute
  • submit 버튼을 누르면 form의 action attribute에 있는 서버로 데이터가 전송된다
  • default action은 현재 페이지
• method
  • get : 데이터를 전송하면 페이지 주소에 데이터가 명시됨. 데이터가 드러나개 됨
    • ex)action_page.php?firstname=John&lastname=Doe
  • post : 공개적으로 드러나면 안되는 개인 정보의 경우 post방식으로
• target
  • _blank, _parent, _top
  • 새로운 페이지가 나오는 방식

<input>

• type
  
  • text
  • submit
  • radio

•   name
  • name을 적지 않으면 submit을 해도 서버로 데이터가 전송되지 않음

<label>

• 라벨의 영역을 클릭하면, 라벨의 for attr에 입력된 element를 클릭하게 된다.
• 매우 좁은 영역을 클릭할 때 유용함. (radio or checkbox)
• for : 클릭할 element의 id 

[HTML Form Element]

<select>

: dropdown list 제공

• option에 selected를 추가하면 초기값으로 세팅 가능
• select의 size를 조정
• multiple 선택 가능

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

<textarea>

: 여러줄의 input field가 필요할 때

style의 width와 height로도 크기 조정 가능

<form>
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
</form>

<button>

   <button type="button" onclick="alert('Hello World!')">Click Me!</button>

<fieldset>

• 여러개의 input을 하나의 그룹으로 묶기
• <legend> : fieldset의 caption을 의미함

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

<datalist>

• 해당하는 input에 보기처럼 미리 지정한 option들을 보여줌

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

<output>

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

 

[HTML Input Types]

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

[HTML Input Attributes]

• value: input field의 default value 지정
• readonly
• disabled : 수정과 클릭 모두 하지 못하도록 설정
• size: input field의 가로 width 설정
• min
• max
• multiple : 두개 이상의 선택이 가능하도록 함
• pattern: text, date, search, url, tel, email, password 등과 함게 사용됨
• placeholder: input field에 힌트 제공
• require : 무조건 채워야 함
• step: 만약 step이 3이면 0,3,6,9..의 숫자만 유효한 값임
• autofocus: 지정된 곳에 자동으로 커서가 시작함
• list : datalist의 아이디를 참조해서 input field에 적용함

[HTML Input form* Attributes]

• input formenctype attribute
  • 어떻게 서버로 전송된 데이터가 인코딩될것인가?
  • ex) formenctype="multipart/form-data"
  • post method일때만 해당
• formtarget
  • target 페이지가 어떻게 열릴지
  • 새로운 탭? 현재 페이지에?
• formnovalidate / novalidate
  • submit으로 전달되는 데이터들이 유효하지 않음을 의미함

[HTML Canvas Graphics]

<canvas>

: 그래픽을 위한 컨테이너를 의미함, 실제 그림과 이미지같은 그래픽은 자바스크립트를 이용해서 그림!

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black"></canvas>
<canvas id="myCanvas2" width="200" height="100" style="border: 1px solid black"></canvas>
<canvas id="myCanvas3" width="200" height="100" style="border: 1px solid black"></canvas>
<canvas id="myCanvas4" width="200" height="100" style="border: 1px solid black"></canvas>
    
    ...
    
    // 라인 그리기
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

// 원 그리기
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();

// 글씨 쓰기
var c3 = document.getElementById("myCanvas3");
var ctx3 = c3.getContext("2d");
ctx3.font = "30px Arial";
ctx3.fillText("Hello World", 10, 50);

// 그라데이션으로 색깔 채우기
var c4 = document.getElementById("myCanvas4");
var ctx4 = c4.getContext("2d");
// var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); 이렇게 하면 원형의 모양으로 그라데이션 생성 가능!
var grd = ctx4.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

canvas tag 여러가지 예시들

[HTML SVG Graphics]

<svg>

벡터를 기반으로 그래픽 그리기

원, 직사각형, 둥근 직사각형, 별 등 다양한 그림들을 그릴 수 있다.

<h4>원 그리기</h4>
<svg width="100" height="100">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    

<h4>직사각형 그리기</h4>
<svg width="400" height="100">
	<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>


<h4>둥근 직사각형 그리기</h4>
<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" />
</svg>


<h4>별 그리기</h4>
<svg width="300" height="200">
	<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
    
<h4>SVG 로고 만들기</h4>
<svg height="130" width="500">
	<defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
      Sorry, your browser does not support inline SVG.
    </svg>

[HTML Video]

<video>

• control attr: 마우스를 통해 play, pause, volume조절을 가능하게 해줌
• autoplay attr: 비디오 자동 실행 설정
• <source> element: source로 설정한 비디오가 재생이 안되면 대안으로 다른 비디오를 설정해줌
  • 기본적으로 가장 위의 source 비디오 재생

<video width="400" controls>
	<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<video width="400" autoplay>
	<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<h4>자바스크립트 활용 예시</h4>
    <div style="text-align:center">
      <button onclick="playPause()">play/pause</button>
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
      <br><br>
      <video width="400" id="video1">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
    </div>
    
    ...
    
    <script>
    var myVideo = document.getElementById("video1");

    function playPause() {
      if (myVideo.paused)
        myVideo.play();
      else
        myVideo.pause();
    }

    function makeBig() {
        myVideo.width = 560;
    }

    function makeSmall() {
        myVideo.width = 320;
    }

    function makeNormal() {
        myVideo.width = 420;
    }

    </script>

버튼을 눌러서 재생/중지, 화면의 크기를 조정할 수 있는 예시

[HMTL Audio]

• <audio> 태그도 위에서 설명한 video와 비슷한 attribute와 element를 함께 사용한다.
  • controls
  • <source>

[HTML Plug-ins]

• <object type="" data="https://"> </object>
• <embed type="video/quicktime" src="#" width="300" height="300">

[HTML Youtube]

• 동영상 자동 재생
  • originalURL?autoplay=1 
• 동영상 반복재생
  • originalURL?playlist=동영상아이디
  • 밑 예시에서 ioNng23DkIM 부분
• 동영상 컨트롤
  • originalURL?controls="0"

    <iframe width="560" height="315" src="https://www.youtube.com/embed/ioNng23DkIM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>