Form 태그
서버로 전송이 필요한 기능에 사용됨
웹페이지에서의 입력 양식
사용자가 입력한 정보를 url로 전송
<form action="http://localhost/login.php">input
input type 입력하는 값의 유형
name 서버로 전송되는 내용을 구분할 수 있게 이름을 지정할 수 있음, 이름의 값으로 서버에 내용이 전달 됨.
클릭하면 달력, 날짜 선택 가능
<p>클릭하면 달력, 날짜 선택 가능 <input type="date" name="date"></p>아이디와 패스워드
value 기본적으로 텍스트 상자안에 보여지는 값
placeholder 내용을 입력하면 지워지는 안내문구
ID :
PW :
안녕하세유~?
진짜 사라지나요~?
<p>ID : <input type="text" name="id"></p>
<p>PW : <input type="password" name="pw"></p>
<p>안녕하세유~? <input type="text" name="id" value="반가와요~~^^"></p>
<p>진짜 사라지나요~?<input type="text" size="30" placeholder="한번 적어봐. 나도 궁금하니깐."></p>textarea 텍스트 상자
cols 입력할 수 있는 글자 수 만큼 사이즈가 커짐
rows 입력할 수 있는 줄만큼 커짐
텍스트에어리어 태그 사이에 텍스트를 입력하면 밸류값이 됨 -> 다른 태그처럼 밸류 속성을 입력하지 않아도 됨
요기다가 적어유~
button 일반 버튼
아무 행동도 하지 않는 버튼
onclick 클릭하면 생기는 액션
value를 입력하지 않으면 아무 내용 없는 버튼 박스가 됨
<p><input type="button" value=""></p>
<p><input type="button" value="누르면 아프다!" onclick="alert('버튼을 누르다니~ 오늘도 행복한 하루 보내세용')"></p>
summit 버튼
사용자가 입력한 데이터를 폼 액션에 적은 서버의 주소로 전송할 수 있는 제출 버튼
누르면 페이지가 바뀜
value 버튼의 내용을 바꿔줌
<p><input type="submit"></p>
<p><input type="submit" value="안녕이다~~~"></p>
<p><input type="submit" value="한번 눌러보시던가 호호호"></p>reset 초기화 버튼
작성한 내용이 전부 삭제된다.
<p><input type="reset" value="내 인생도 초기화 하고싶다... 재밌을텐데!"></p>dropdown list 혹은 콤보 박스
select 선택할 수 있는 태그로 여러 옵션들을 묶어서 선택할 수 있게 함
콤보 박스가 어떤 이름으로 서버로 전송될지 보여줌
오늘 나의 기분은?
기분좋음 거지같음 짜증남 화남
<select name="mind">
<option>기분좋음</option>
<option>거지같음</option>
<option>짜증남</option>
<option>화남</option>
</select>
<input type="submit">라디오, 단일 선택
name값이 같은 것들끼리 묶어주면 같은 것 들 사이에서 다중 선택 안됨
checked 기본적으로 체크되어있도록 설정
티셔츠 색상
붉은색
푸른색
그 사이 3초가 짧은 시간
핏 유형
슬림
레귤러
오버사이즈
<p> 티셔츠 색상 <br>
붉은색<input type="radio" name="color">
푸른색<input type="radio" name="color">
그 사이 3초가 짧은 시간<input type="radio" name="color"></p>
<p> 핏 유형 <br>
슬림<input type="radio" name="color2">
레귤러<input type="radio" name="color2" checked>
오버사이즈<input type="radio" name="color2"></p>
체크 박스, 다중 선택
오늘 한 운동을 체크해보시오
스쿼트
데드리프트
워킹런지
랫풀다운
<p> 오늘 한 운동을 체크해보시오 <br>
스쿼트 <input type="checkbox" name="pt">
데드리프트 <input type="checkbox" name="pt">
워킹런지 <input type="checkbox" name="pt">
랫풀다운<input type="checkbox" name="pt">
</p>