• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

HTML 정리 04

28 Jan 2019

Reading time ~6 minutes

HTML 정리 04 - HTML Form Control, HTML5에서 추가된 태그와 지원하는 태그

input tag - text type

  • text type일 때 disabled와 readonly 속성을 적용한 모습
    • rdisabled는 값 수정 불가, 서버로 전송 안됨
    • readonly는 값 수정 불가, 서버로 값 전송 됨.
<input type="text" name="test" disabled="disabled"  value="disabled"/><br/>
<input type="text" name="test" readonly="readonly"  value="readonly"/><br/>

01

  • size속성으로 입력 필드의 길이를 조절가능
    • 보여줄 글자 수 이긴 하지만 정확히 안떨어짐
    • 융통성있게 크기를 맞추면 된다.
  • maxlength는 입력가능한 글자 수
    • size와 maxlength는 아무런 관련이 없다!
  • value는 아무값도 입력하지 않았을 때 서버로 전송할 값
    • 값이 입력되면 입력된 값이 넘어간다.
<input type="text" name="id" size="3" maxlength="5" value="ABCDE"/>

02

  • placeholder 속성은 HTML5에서 추가된 속성
    • 사용자가 값을 입력하기 전까지 안내 문자열을 보여줄 때 사용
<input type="text" name="id2" size="5"  placeholder="아이디"/><br/>
<input type="password" name="pass2" size="5"  placeholder="비밀번호"/>

03

input tag - password type

  • 비밀번호나 외부에 값을 노출시키지 말아야할 데이터를 입력받을 때 사용
    • 속성은 text와 동일
  • text와 다르게 password는 한글이 입력되지 않는다. * 다른 곳에 한글 입력 후 복사 붙여넣기로 입력은 가능
<input type="password" name="pass" size="10"  maxlength="7" value="비밀번호"/>

04

input tag - checkbox type

  • 보기로 준비된 값 중 사용자가 여러개를 선택하여 입력할 때 사용
  • value속성값이 서버로 전송될 값!
  • name을 동일하게 설정하면 group으로 묶여진다.
    • 배열로 처리됨(일괄처리 가능)
    • 웹은 이름이 같으면 무조건 배열로 처리된다.
  • checked는 특정 checkbox가 선택이된 상태로 제공할 때 사용
    • 4.0.1까지는 checked 권장, HTML5에서는 checked=”checked”를 권장
<strong>좋아하는 과일 입력</strong><br/>
<input type="checkbox" name="fruit"  value="사과"/>사과(가을)<br/>
<input type="checkbox" name="fruit" value="배"  checked="checked"/>배(가을)<br/>
<input type="checkbox" name="fruit"  value="딸기"/>딸기(봄)<br/>
<input type="checkbox" name="fruit"  value="포도"/>포도(여름)<br/>

05

input tag - radio type

  • 보기로 준비된 값 중 사용자가 한개를 선택하여 입력할 때 사용
  • name을 동일하게 설정하면 group으로 묶여진다.
    • 배열로 처리됨
<input type="radio" name="gender" value="남자"  checked="checked">남자<br/>
<input type="radio" name="gender" value="여자">여자<br/>

06

input tag - hidden type

  • 사용자에게 값을 노출시키지 않고 값을 전달할 때 사용
    • JavaScript에서 값을 변경한 후 서버로 전송하는 경우 많이 사용됨
    • 화면에 그려지진 않지만 소스보기로 확인 가능
<input type="hidden" name="addr" value="서울시 강남구  역삼동" />

07

input tag - image type

  • 이미지를 제공할 때 사용자가 클릭하면 서버로 전송하게 된다.
    • submit기능
      • form 태그 안에 모든 HTML Form Control들이 가진 값을 서버로 전송하는 일
      • image태그는 검증하는 과정을 거치지 않고 보내지기 때문에 사용을 권장 안함.
<input type="image" src="../common/sist_logo.jpg"  />&lt;클릭가능<br/>
<img src="../common/sist_logo.jpg" />&lt;img태그,  클릭불가

08

input tag - file type

  • 파일 전송할 때 사용
  • JavaScript에서 값 변경을 할 수 없는 HTML Form Control
<input type="file" name="update"/>

09

input tag - submit,reset,button type

  • 사용자가 클릭하여 동작할 수 있는 버튼 류 HTML Form Control
  • form 태그의 하위태그(자식태그)로 존재해야만 동작
  • submit
    • HTML Form Control의 값을 서버로 전송하는 기능
    • 브라우저마다 정해진 라벨이 존재
  • reset
    • HTML Form Control의 값을 초기화하는 기능
    • 브라우저마다 정해진 라벨이 존재
  • button
    • 버튼 모양
    • JavaScript에서 유효성 검증을 해야하는 경우
    • 기본 라벨이 없음
<input type="submit" />
<input type="reset" />
<input type="button" />

10

<input type="submit" value="전송"/>
<input type="reset" value="초기화"/>
<input type="button" value="버튼"/>

11

웹서버와 웹클라이언트의 요청/응답

12

Form tag

  • HTML Form Control의 값을 서버로 전송하는 일을 하는 태그
    • input 태그들을 form태그로 감싸면 submit, button, reset이 동작하게 된다.
  • action 속성
    • 값을 받을 페이지의 URL
      • Servlet명, JSP명, ..
  • name 속성
    • JavaScript에서 접근할 이름
  • method 속성
    • 전송방식(GET/POST)
<form action="값을 받을 페이지의 URL" name="JavaScript에서 접근할 이름"
    method="전송방식">
    <input />
    ...
</form>

전송방식

  • GET
    • 주소창으로 데이터를 전송하는 방식
      • 보안이 되지 않는다.
      • 중요하지 않은 데이터를 전달할 때 사용
      • 255자 이하의 소용량 데이터를 전송할 때 사용
        • 파일은 전송할 수 없다.
    • 주소창에 URL을 직접 입력, anchor tag, form태그의 method 속성값을 get으로 줬을 때, JavaScript에 location.href로 이동할 때 GET방식으로 전송

13

  • POST
    • HTTP header를 통해서 데이터를 전송하는 방식
      • 보안이 된다.
      • 256자 이상의 대용량 데이터를 전송할 때 사용
        • 파일을 전송할 수 있다.
        • enctype=”multipart/form-data”로 변경
    • 반드시 form태그 method 속성값이 post인 경우에만 POST방식으로 전송

14

label tag

  • 택스트의 용도를 알려주기 위해서 사용하는 태그
<label>이름</label><input type="text" size="5" length="5" />

15

fieldset tag

  • HTML Form Control을 묶어주기 위해 사용하는 태그
  • legend 태그를 fieldset 하위태그로 넣으면 Java Swing의 titled border 라벨처럼 표시가능
<form action="test.jsp" method="get" >
<fieldset>
<legend>HTML Form Control연습</legend>
...
</fieldset>
</form>

16

select tag

  • radio와 비슷, 정해진 값 중 하나만 선택하여 전송할 때 사용
    • name속성은 식별하기 위한 이름
    • option 태그의 value값은 서버로 전송되는 값
      • option태그의 selected 속성으로 선택이된 상태로 나오게 할 수 있다.
<label>지역 선택</label>
<select name="loc">
     <option selected="selected">----- 지역 선택 -----</option>
     <option value="서울">서울시</option>
     <option value="경기">경기도</option>
     <option value="강원">강원도</option>
     <option value="충청">충청도</option>
     <option value="경상">경상도</option>
     <option value="전라">전라도</option>
     <option value="제주">제주</option>
</select>

17

  • size는 보여줄 옵션의 개수
<select size="5">
     <option>SKT</option>
     <option>KT</option>
     <option>LGT</option>
</select>

18

textarea tag

  • 많은 양의 문자열을 입력할 때 사용
  • rows 속성은 보여줄 행 수
  • cols 속성은 한줄에 쓸 글자수
<textarea rows="5" cols="30" name="ta">쓰고 싶은 내용</textarea>

19

HTML5에서 추가된 HTML Form Control들

  • ie에서 지원하지 않기 때문에 쓰일 일은 많이 없다..
<input type="OOO"/>
  • 의미적
    • email, tel
  • 기능적
    • date(날짜)
    • color(색선택)
    • number(숫자)
    • range(범위)
  • 의미적인 type들은 text type과 차이점은 없지만 소스볼 때 가독성을 높이기 위해 사용
<div>
     <strong>의미적 Form Control</strong><br/>
     <!-- 디자인은 text와 같지만 소스보기할 때
     입력값이 무엇인지 의미적으로 전달하는 Control들 -->
     <label>이름</label>
     <input type="text" name="name"  placeholder="이름"/><br/>
     <label>이메일</label>
     <input type="email" name="email"  placeholder="이메일"/><br/>
     <label>전화번호</label>
     <input type="tel" name="tel"  placeholder="전화번호"/><br/>
     <label>사이트 URL</label>
     <input type="url" name="url"  placeholder="URL"/><br/>
</div>

20

  • 기능적인 date type
    • value 속성값이 “년-월-일” 형식의 값이 입력되면 해당 날짜정보가 입력되어 보여진다.
      • 날짜 형식이 아니면 value값인식을 못 함 (value 속성 안쓴것과 동일 결과)
<div>
     <strong>기능을 가진 HTML Form Control</strong><br/>
     <label>날짜</label>
     <input type="date" name="date" value="2018-10-19"/>
</div>

21

  • month 타입은 년-월까지만 선택가능
<input type="month" name="mon" value="2018-10"/>

22

  • datetime-local 타입은 “년-월-일 시:분:초” 형식의 값을 가진다.
<input type="datetime-local" name="date"/>

23

  • color 타입
    • 색 선택가능
    • value속성값으로 RGB값을 넣어줄 수 있다.
<label>색선택</label>
<input type="color" name="col" value="#FF0000"/>

24

  • number 타입
    • 숫자를 위아래 화살표 클릭으로 값변경이 가능
<label>숫자</label><br/>
<input type="number" name="num"/>

25

  • range 타입
    • min 속성으로 최소값
    • max 속성으로 최대값
    • value 속성은 현재값 설정이 가능
<label>범위</label>     
0<input type="range" name="ran" min="0" max="100" value="12"/>100

26

media tags

  • HTML5 이전
    • embed tag
      • 영상, 음악 파일 모두 재생할 수 있다.
  • HTML5에서 제공하는 태그
    • audio tag
      • 음악만 재생
    • video tag
      • 동영상만 재생
      • 지원 코덱이 다르기 때문에 브라우저에 따라 재생여부가 다름

embed tag

<embed src="미디어 파일의 경로" width="넓이" height="높이" controller="true"/>
  • controller 속성을 true로 주면 컨트롤바가 추가됨
<label>음악파일</label>
<embed src="media/audio.mp3" controller="false"  autoplay="false"/>
<br/>
<label>동영상파일</label>
<embed src="media/video.mp4" controller="true"  width="300" height="300" autoplay="false"/>

27

28

audio tag

<audio src="음악파일의 경로" controls="controls" />
  • audio 태그는 source 태그를 하위 태그로 줘도 된다.
    • 위에 source태그의 음악파일이 재생될 수 없다면 아래 source태그가 가진 음악파일이 재생된다.
      • 순서대로 재생되는게 아니라 첫번째 소스가 재생이 안되면 다음 소스가 재생이 되도록한 것.
      • mp3가 안되면 wav파일이 재생되도록 한 것 처럼
<audio controls="controls">
    <source src="음악파일 경로"/>
    <source src="음악파일 경로"/>
    ...
</audio>
  • 다음과 같이 코딩하면 만약 브라우저가 재생을 지원 안하면 “당신의 브라우저는 이 태그를 지원하지 않습니다.”가 출력된다. ```html
당신의 브라우저는 이 태그를 지원하지 않습니다. 

![29](https://github.com/younggeun0/younggeun0.github.io/blob/master/_posts/img/Web/HTML/04/29.png?raw=true)

## video tag

```html
<video src="동영상파일 경로" width="" height="" controls="controls" />
  • audio처럼 source를 줄 수 있다
<video controls="controls" width="" height="">
    <source src="동영상파일 경로" />
    <source src="동영상파일 경로" />
    ...
</video>

<div>
     <video autoplay="autoplay" width="200"  controls="controls">
          <source src="media/video.mp4"/>
          당신의 브라우저는 이 태그를 지원하지 않습니다.
     </video>
</div>

30

HTML5에서 지원되는 태그

  • mark tag
    • 하이라이트(형광펜효과)
  • code tag
    • element(열림태그와 닫힘태그 사이)가 가지고 있는 값이 다른 언어의 코드임을 명시적으로 알려줄 때 사용
<code>
    다른 언어의 코드
</code>

<div>
     <code>
          int i=0;<br/>
          System.out.println(i);
     </code>
</div>

31

  • address tag
    • element가 가지고 있는 값이 주소임을 명시적으로 나타낼 때
    • 이탤릭체로 표현된다.
<div>
     우리집 주소는 <address>서울시 강남구 역삼동  한독빌딩 8층 4강의장</address>입니다.
</div>

32

  • audio tag, video tag
  • canvas tag
    • 2D 그래픽을 그릴 때 사용
    • flash 효과를 대체가능
    • JavaScript가 반드시 필수
  • nav, section, aside, footer tag
    • css로 설정한 영역을 의미적으로 구분하는 태그(semantic tag)

숙제

  • 아래 두 페이지를 HTML을 사용하여 작성하세요.

33

  • join.html 풀이

34

35

  • agreement.html 풀이

36


HTML