1. 사용자 정보 입력 태그

input: 데이터 정보를 입력하는 태그

    type: 속성

아이디: <input type="text"> <br>
패스워드: <input type="password"><br>
<input type="checkbox">동의함<br>
<input type="radio">신용카드 결제<br>
<input type="button" value="로그인">
  • text : (문자,숫자,특수문자 등) 사용자가 입력한 값을 노출하면서 보여주는 입력폼
  • password : 입력된 값을 특수문자(디스크)로 출력시키는 입력폼
  • checkbox : 사용자가 체크하여 선택하는 입력폼 - 한가지 이상을 선택사용
  • radio : 한가지 이상의 값 중 한가지를 선택하는 입력폼
  • button : value와 함께 사용되며, 클릭시 이벤트가 발생하는 폼

 

<p>
<input type="radio" name="a">동의 함
<input type="radio" name="a">동의 안 함
<br>
<input type="radio" name="b">SMS 수신함
<input type="radio" name="b">SMS 수신안함
</p>

<p>
<!-- checked(checkbox, radio): 미리 데이터를 체킹하여 적용시키는 속성 -->
<input type="checkbox" checked>자동 로그인
</p>

<p>
<input type="radio" name="c" checked>신용카드
<input type="radio" name="c">계좌이체
<input type="radio" name="c">무통장입금
<input type="radio" name="c">쿠폰사용
</p>
  • radio : 속성 형태는 그룹 형태의 구조를 가지고 있음 //그룹을 설정하는 속성은 name으로 셋팅
    • checked(checkbox, radio): 미리 데이터를 체킹하여 적용시키는 속성

<textarea cols="100" rows="10"></textarea>

<p>
통신사 : <select>
<option>SKT</option>
<option>KT</option>
<option>LGT</option>
<option>알뜰폰</option>
</select>
</p>
  • textarea : 여러 단어를 복합적으로 입력을 필요로 할 경우 사용
    • cols : 텍스트 영역의 가로크기를 말함
    • rows : 한번에 보여지는 라인 수를 말함 
    • 이 안에서는 주석 쓰면 안됨 (영역안에 글자가 써짐)
    • 해당 rows 숫자 보다 클 경우 자동 스크롤바 생성됨
  • select : 선택사항을 미리 셋팅 후 사용자가 옵션을 선택하는 형태의 폼
    • option은 select와 함께 사용하는 마크업

 

🫸HTML5 형태의 추가 태그

<p>
상품검색: <input type="text" list="aa">
<datalist id="aa">
<option>김치 냉장고</option>
<option>LG 에어컨</option>
<option>삼성 에어컨</option>
<option>LG 가습기</option>
</datalist>
</p>

<p>
SMS 수신여부: 
<input type="radio" name="d" id="sms1"><label for="sms1">수신</label> 
<label><input type="radio" name="d">수신거부</label> <br><br>
<label><input type="checkbox">자동 로그인</label>
</p>
  • datalist : 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공
    • list속성을 사용, datalist id라는 속성을 셋팅해야만 적용
  • label : checkbox, radio의 핸들링이 쉽게 할 수 있도록 보조 역할의 마크업
    • for 속성과 id라는 속성을 이용하여 핸들링  ※id는 절대 중복이름을 사용하지 않는다

2. Form 태그

<form id="frm" method="GET" action="https://search.naver.com/search.naver">
상품검색 : <input type="text" name="query">
<input type="submit" value="검색">
<input type="reset" value="초기화">
<input type="button" value="검색2" onclick="data()">
</form>

<form>
<input type="submit" value="아이디 중복체크">
</form>

<form method="post" action="http://nate.com">
<button>이동</button>
</form>

<script>
function data(){frm.submit();}
</script>
  • form : 데이터를 해당 경로로 전송하는 태그 (GET, POST)
    • method
      • POST 통신 : URI와 관계없이 사용자가 입력한 값을 Background 형태로 데이터를 전송
      • GET 통신 : URI에 값을 적용하여 데이터를 전송하는 방식
    • action : 경로를 말함 (Back-end)
    • submit, reset: form 태그 안에서만 작동하는 속성 버튼 //각 form마다 한번만 사용이 가능
    • button: form태그 안에서도 작동하고, 밖에서도 작동함 //단, 무조건 JS
      • HTML5 버튼(button)-type은 (submit(기본), button, reset)
    • form태그 안에 form 절대 사용하지 않음
    • 하나의 웹페이지에 여러개의 form이 존재할 수 있음

😊응용문제

method :Post
name값 : 고객명 (mname), 이메일 (memail)
URI : http://블라블라/basic_html/dataok.do
<form method="POST" action="http://블라블라/basic_html/dataok.do">
고객명: <input type="text" name="mname"><br>
이메일 : <input type="text" name="memail"><br>
<input type="submit" value="전송">
</form>
  • input type태그 기준으로 name, id, class 3가지 속성이 완벽하게 나뉨
    • name : Back-end가 데이터를 받기 위한 속성
    • id : Front-end가 핸들링 하기 위한 속성
    • class : Stylesheet를 적용하기 위한 속성

 

3. 비디오

<video width="550" height="550" poster="" controls>
<source src="./" type="video/mp4">
<track kind="subtitle" src="" srclang="en" label="English">
<track kind="subtitle" src="" srclang="ko" label="Korea">
<track kind="subtitle" src="" srclang="jp" label="Japan">
</video>
  • poster : 썸네일
  • controls : 비디오 컨트롤러
  • srclang : 자막

주저리주저리

 

http://localhost (내부망)

cmd에서 ipconfig로 ip확인해서
localhost대신 ip넣어도됨

http://ip주소:8080/basic_html/index5.html

 

 

 

티스토리툴바