Form 태그 이용하기

1) form 태그 안에 다양한 태그, 속성들을 이용하여 양식 생성 가능

2) form 태그는 웹브라우저가 서버에 정보를 넘겨주는 것 까지만 담당

3) label 태그

<label for = "인식값" > 표시할 값 </label>

<input type = "만들고자 하는 양식 타입" id = "인식값">

인식값이 같은 것 끼리 한 덩어리로 인식하므로 <label> 태그 안에 모두 넣을 필요가 없어진다.

form 태그를 이용하여 

텍스트 입력창, 비밀번호 입력창, 전송(submit)버튼, 

체크박스, 라디오버튼

스핀박스, 슬라이드 바

날짜 선택창 삽입하기

<form action = "폼을 처리할때 실행할 프로그램 명.php">
  <!--for 를 사용하여 같은 lable 블록에 넣지 않고도 세트라는 것을 표시-->
  <label for = "user-id">아이디 : </label>
  <input type ="text" id = "user-id">

  <label>비밀번호 : <input type="password"></label>
  <br>

  <!--전송버튼 (submit) value (버튼에 보여지는 대체 텍스트)-->
  <input type ="submit" value="로그인 전송">
  <br>

  <!--체크박스와 라디오버튼-->
  <label><input type="checkbox" value= "실제전송되는값"> 웹에서 보이는 값</label>
  <label><input type="radio" name="gift" value="yes" >선물 포장</label>
  <!--체크박스는 중복선택가능, 라디오박스는 1개만 선택 가능 (name이 같은 것들 중 1개)-->
  <br>

  <!--스핀박스(number)와 슬라이더 막대(range)로 개수지정하기-->
  <input type="number" min="0" max="5">개 (최대 5개)
  <input type="range" min="0" max="5">개 (최대 5개)
  <br>

  <!--날짜 지정하기-->
  <input type="date">
  <input type="week">
  <input type="month">
  <br>
  
  <!--시간 지정하기-->
  <input type="time">
  <input type="datetime-local">
  <br>

  <!--범위 제한하기-->
  <input type="date" min = "2020-02-01" max = "2022-09-21">
  <input type="time" min = "14:00" max = "16:00">
  <br>

  <!--hidden: 정보를 서버로 전송하기 전까지 저장-->
  <input type="hidden" name="url" id="url" value="사이트를 통한 직접 로그인">


</form>

아이디 : 비밀번호 :

웹에서 보이는 값 선물 포장
개 (최대 5개) 개 (최대 5개)

 

 

See the Pen Untitled by Javaiary (@javaiary) on CodePen.