HTML_form태그개념

<form></form>태그

: 화면에서 사용자가 입력한 값에 대해 처리 방식 지정

 

action속성

: 입력된 데이터들을 전송 받을 곳(페이지, 서버, 클래스 등...) 지정

 

method속성

: get / post방식

: get을 사용하면 url상단에 검색어가 보여진다.

: post를 사용하면 url상단에 검색어가 보여지지않는다(숨김)

 

<form action="여행.html" method="get">
	<label>검색할 내용:</label>
    <input type="text" size="20" name="search" placeholder="검색어를 입력해주세요">
    <input type="submit" value="검색">
</form>

검색한 검색어가 get으로 method가 설정되어 있기 때문에 검색어가 url에 보여지고,

검색을 누르면 action에 설정된 여행.html 로 연결된다.

 

<fieldset></fieldset>

: 테이블과 <label> 들을 묶어을 때 사용한다.

 

<legend></legend>

: 필드셋에 대한 제목 작성

 

<input>태그

: 사용자에게 값을 받아오는 역할

: <input type="hidden">

: <input type="text">

: <input type="password">

 

readonly

: 변경 불가능, 읽기만 가능한 상태

<input type="text" size="15" placeholder="아이디를 입력하세요" maxlength="9"
	name="userId" autofocus value="아이디를 입력하세요" readonly>

텍스트 타입의 사이즈 15인 아이디 입력을 받는 창이다. 최대 9자리까지 가능하다.

이름은 userId이고 읽기만 가능하고, placeholder를 사용하여 텍스트 "아이디를 입력하세요"라고 적혀있다.

오토포커싱이 들어가 있기 때문에 여러 입력창이 존재한다면 그 중 userId에 먼저 커서가 들어가있다.

 

name속성

: 사용자가 입력한 데이터를 저장할 수 있는 변수명 기술하는 속성

: name="search"-->search(데이터)
: form태그가 없으면 아무것도 작동하지않는다.

: form태그를 통해 데이터를 전송하면 'name속성 값=value속성 값'의 형태로 데이터 전송

 

value속성

: 입력한 데이터가 저장되는 속성

: value="아이디를 입력하세요"--> 칸에 "아이디를 입력하세요"가 담겨진 상태
: 검색한 내용은 무조건 들어간다.
id=검색한 내용

 

autofocus

: 페이지가 로드될 때 자동으로 포커스가 이동한다.(ex. 포커스 맞춰진 부분에 커서 깜빡거림)

 

maxlength=""
: 최대 길이 설정

 

form태그를 통해 데이터를 전송하면 'name속성 값=value속성 값'의 형태로 데이터 전송

 

<text와 관련된 input태그 속성값>

placeholder

: "검색어를 입력하세요" 등 입력받는 창에 임의로 작성하는 문구에 사용

 

type="hidden"

: 화면에는 보이지 않는 상태로 데이터 전송 

 

type="password"

: 타이핑한 글자가 보이지 않는다.

 

<input type="button" value="버튼">

<input type="submit" value="전송">
<input type="reset" value="취소">

 

<button type="button">button</button>

: button은 form태그 안에 있으면 자동 submit역할

<button type="submit">submit</button>

 

 

<button type="reset">reset</button>

 

<라디오버튼과 체크박스>

<form>
	<label>성별 : </label>
	<input type="radio" name="gender" value="M"><label>남자</label>
	<input type="radio" name="gender" value="F" checked><label>여자</label>
		
	<br>
		
	<input type="checkbox" name="hobby" value="base" checked><label>야구</label>
	<input type="checkbox" name="hobby" value="foot" checked><label>축구</label>
	<input type="checkbox" name="hobby" value="basket"><label>농구</label>

	<br><br>
		
	<input  type="submit" value="전송">
</form>

라디오버튼: 1개만 선택이 가능하다.(사이즈선택)

체크박스: 여러 개 선택이 가능하다.(토핑선택)

 

<file과 image>

<form>
	<label>파일 선택 : </label><input type="file" name="file" multiple accept=".mp4, .png">
		
	<br>
		
	<input type='image' name="img" src="sample/sample/image/flower1.PNG">
	<br><br>
		
	<input type="submit"> 
</form>

<hr>
	
<form>
	<label>검색 : </label><input type="search" name="searchText"><!-- 옆에 x로 글씨지우기가능 -->
	<br>
	<label>홈페이지 : </label><input type="url" name="homepage" value="http://"><!-- http://앞에 꼭 붙어야된다. -->
	<br>
	<label>이메일 : </label><input type="email" name="email"><!-- @가 들어가야한다 -->
	<br>
	<label>전화번호 : </label><input type="tel" name="phone"><!-- 모바일에서 확인할 수 있다. 처음 시작할때 숫자패드로 뜬다.-->
	<br><br>
	<input type="submit" value="전송">
</form>

 

<숫자와 관련된 input태그>

<form>
	<input type="number" min="0" max="100" step="10" value="0" name="num"><!-- 최소0최대100 10씩커진다 -->
	<br>
	<input type="range" min="0" max="100" step="10" name="range">
	<br><br>
	<input type="submit">
</form>

 

<시간/날짜와 관련된 input태그>

<form>
	<input type="date"><br>
	<input type="month"><br>
	<input type="week"><br>
	<input type="time"><br>
	<input type="datetime-Local">
</form>

 

<select태그와 option태그>

<form>
	<label>국적 : </label>
	<select name="nation1" multiple size="2"><!-- 멀티플 컨트롤로 여러개 선택가능, size는 몇개를 보여줄지   -->
		<option>한국</option>
		<option value="ch">중국</option>
		<option value="jp">일본</option>
		<option value="etc" selected>기타</option><!-- 밸류값 안넣어도 기타로 이름이 들어감, 대신 밸류를 선택하면 벨류값이 넣어간다. -->
	</select>
</form>

 

<datalist>

: 텍스트 쓸때 텍스트 미리보기. 밸류가 위로 나오고 값이 밑으로 나온다 밸류랑 값이 같으면 나오지않는다.

<form>
	<label>과목 : </label><input type="text" name="subject" list="sublist">
	<datalist id="sublist">
		<option value="java">자바</option>
		<option value="oracle">오라클</option>
		<option value="JDBC">JDBC</option>
		<option value="html">HTML</option>
	</datalist>
</form>

 

<textarea>

: 여러줄을 입력해주는 텍스트 상자

<form>
	<textarea cols="30" roes="10" placeholder="내용입력">여러 줄 입력할 수 있는 창</textarea>
</form>

: 벨류에 속성넣는 것이 아니라 태그 사이에 텍스트 넣으면 처음부터 값이 들어가있게 하는 것. 사이즈 조절가능!

사이즈 고정하려면 style="resize:none;" 추가  cols: 가로길이