form태그
<form></form>
사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그
▼ 코드 예시 보기 ▼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>7_폼관련태그</title>
</head>
<body>
<h1>폼 관련 태그</h1>
<p>
form 태그는 html에서 사용자가 입력할 수 있는 양식을 제공하는 태그 <br>
form 태그 내의 input 태그들을 통해 사용자가 입력하는 정보를 서버로 넘기는 역할을 함 <br>
* action 속성 : 폼의 입력 된 값들을 전송 받을 서버의 주소를 입력<br>
* method 속성 : get/post 방식으로 전송방식을 지정
</p>
<hr>
<form action="" method="get">
<label for="search">검색할 내용</label>
<input type="text" size="20" name="search" id="search">
<input type="submit" value="검색">
</form>
<p>
submit 버튼을 눌렀을 때 form 태그의 action 속성에 지정 된
경로로 method에 지정한 방식으로 form 태그 내부에 있는
input 태그의 값을 서버로 전달한다 <br>
method의 기본 설정은 get 방식으로 되어있고 get 방식의 경우
url에 주소?name=value&name=value와 같이 데이터가
전송되는 모습을 확인할 수 있다.
</p>
<hr>
<br>
<filedset></filedset>, <legend></legend>
폼 요소를 그룹으로 묶는 태그, 묶은 폼 요소에 명칭을 붙이는 태그
작성
<form action=“프로그램(페이지)” method=“방식” >
<fieldset name=“이름”>
<legend>명칭</legend>
<input type .....>
.
.
</fieldset>
<input type .....>
</form>
▼ 코드 예시 보기 ▼
<h3>fieldset : 폼 요소를 그룹으로 묶는 태그</h3>
<h3>legend : 묶은 폼 요소에 명칭을 붙이는 태그</h3>
<form>
<fieldset>
<legend>필드 셋의 제목을 작성하는 부분</legend>
<label>입력 1 : </label>
<input type = "text"><br>
<label>입력 2 : </label>
<input type = "text"><br>
<label>입력 3 : </label>
<input type = "text"><br>
</fieldset>
<fieldset>
<legend>필드 셋의 제목을 작성하는 부분</legend>
<label>입력 1 : </label>
<input type = "text"><br>
<label>입력 2 : </label>
<input type = "text"><br>
<label>입력 3 : </label>
<input type = "text"><br>
</fieldset>
</form>
<hr>
<br>
<input> *
사용자로부터 data를 입력 받기 위한 태그
▼ 코드 예시 보기 ▼
<h2>text와 관련 된 input 태그</h2>
<form action="" method="">
<h3> type="text" </h3>
<p>한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자</p>
<label>아이디 : </label>
<input type = "text" name ="userid" size="20"
placeholder="아이디를 입력하세요" maxlength="15"
value ="khacademy">
<h3>type="password"</h3>
<p>비밀번호를 입력할 수 있는 텍스트 상자</p>
<label>비밀번호 : </label>
<input type="password" name="userpwd" size="20"
placeholder="비밀번호를 입력하세요" maxlength="15">
<h3>type="search", type="url", type="email", type="tel"</h3>
<p>
겉모습은 텍스트 필드와 비슷하지만 각각의 정보에 맞게
분화 된 기능을 제공하는 텍스트 상자
</p>
<label> 검색 : </label>
<input type = "search" name ="searchtext"
placeholder = "검색할 내용 입력"><br>
<label>홈페이지 : </label>
<input type = "url" name ="homepage" value="https://"><br>
<label> 이메일 : </label>
<input type = "email" name ="email"
placeholder = "이메일을 입력"><br>
<label> 전화번호 : </label>
<input type = "tel" name ="phone"
placeholder = "전화번호 입력"><br>
<input type = "submit" value ="전송">
<input type = "reset" value ="다시 입력">
<hr>
<br>
<h2>숫자와 관련 된 input 태그</h2>
<form>
<h3>type="number"</h3>
<p>
입력창에 숫자를 입력하는 것이 기본이지만,
브라우저에 따라 스핀박스가 표시 되기도 함 <br>
(스핀박스 : 입력 창 오른쪽 위/아래 화살표 버튼)
</p>
<label>수량 : </label>
<input type="number" name="amount"
min="0" max="100" step="10" value="50">
<h3>type="range"</h3>
<p>슬라이드 바를 통해 숫자 지정 가능</p>
<input type="range" name="point"
min = "0" max="100" value="50" step="10"><br>
<input type="submit" value="제출">
<input type="reset" value="취소">
</form>
<br>
<hr>
<h2>날짜/시간 관련한 input 태그</h2>
<form>
<h3>type="date/month/week/time/datetime-local"</h3>
<label>date : </label>
<input type="date" name="dateIn"><br>
<label>month : </label>
<input type="month" name="monthIn"><br>
<label>week : </label>
<input type="week" name="weekIn"><br>
<label>time : </label>
<input type="time" name="timeIn"><br>
<label>datetime-local: </label>
<input type="datetime-local" name="dtlIn"><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
hidden
작성
<input type=hidden name=“명칭” value=“값”>
text
작성
<input type=text name=“명칭” value=“값” size=“숫자” maxlength=“숫자”>
password
작성
<input type=text name=“명칭” minlength=“숫자” maxlength=“숫자”>
button
작성
<input type=button id=“명칭” value=“값” onclick=“스크립트함수”>
Checkbox / radio
작성
<input type=checkbox/radio name=“명칭” value=“값” [checked] >
▼ 코드 예시 보기 ▼
<h2> 라디오 버튼과 체크 박스 </h2>
<p>
태그를 여러개를 선언하여 하나의 용도로 사용하는 경우
name 속성 값이 같아야 함 (name 속성이 같아야 grouping 가능)
</p>
<form>
<h3> type="radio" </h3>
<label> 성별 : </label>
<input type="radio" id="male" name="gender" value="M" >
<LABEL for="male">남자</LABEL>
<input type="radio" id="female" name="gender" value="F" ckecked >
<LABEL for="female">여자</LABEL>
<h3> type="checkbox" </h3>
<label> 취미 : </label>
<input type="checkbox" id="baseball" name="hobby" value="baseball" checked>
<label for="baseball"> 야구 </label>
<input type="checkbox" id="basketball" name="hobby" value="basketball">
<label for="basketball"> 농구 </label>
<input type="checkbox" id="football" name="hobby" value="football">
<label for="football"> 축구 </label><br>
<input type="submit" value="제출">
<input type="reset" value="취소">
</form>
<!-- name을 같게 해주어야 같은 hobby로 묶일 수 있다.
label for 뒤에 id를 입력하면 글자만 선택해도 선택이 된다.
checked를 입력하면 애초에 화면에서 선택된 상태로 보여진다.-->
<h2>추가 input 태그</h2>
<form>
<h3>type="color"</h3>
<label>색상 선택 : </label>
<input type = "color" name ="color">
<h3>type="file"</h3>
<label>파일 선택 : </label>
<input type = "file" name ="uploadfile">
<h3>type="hidden"</h3>
<label> 안보임 : </label>
<input type = "hidden" name ="hiddenvalue" value="1">
<!--hidden은 눈에는 안보이지만 저장해놓고 전송하고싶은 데이터가 있을때 사용한다.-->
<h3>type="button", type="submit", type="reset"</h3>
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
<!--button 태그를 이용하여 버튼 만들기
form 태그 안의 button 태그의 type을 기재하지않았을경우
default가 submit 설정이므로 이를 막고싶다면 type="button" 을 반드시 기재해야함-->
<!--form태그의 안에있는 타입은 기본적으로 submit이다.-->
<!--input을 이용하지않고 button 태그를 이용하기, input타입의 button과 동일한 기능-->
<button type="button" >button</button>
<button type="submit" >submit</button>
<button type="reset" >reset</button>
</form>
file
작성
<input type=file name=“명칭” [multiple] >
<label></label>
- <form>요소에 레이블(명칭)을 붙이기 위한 태그
- ** 레이블 : 입력창 옆에 붙여 놓은 문구(예: 비밀번호, 아이디 등)
작성1
<label> 명칭<input…> </label>
작성2
<label for=“id이름”>명칭</label>
<input id=“id이름” type=“타입”>
image
작성
<input type=img name/id=“명칭” src=“경로” value=“전달값”>
submit / reset
작성
<input type=submit/reset id=“명칭” value=“입력”/”취소“ >
type html5 양식태그
datetime
작성
<input type=color name=“명칭” value=“색상값”>
Date / datetime / datetime-local / month / week
작성
<input type=“타입명” id=“명칭” min=“0000-00-00” max=“0000-00-00” step=“숫자” value=“날짜”>
- ☞ date: yyyy-mm-dd / datetime:yyy-mm-ddT00:00(24) month:yyyy-mm / week : yyyy-W24
time
작성
<input type=time id=“명칭” value=“00:00” >
number / range
작성
<input type=number/range id=“명칭” min=“숫자” max=“숫자” step=“숫자” value=“숫자”>
type 여러 값 표현 태그
<select > </select>
▼ 코드 예시 보기 ▼
<h2>select 태그와 option 태그</h2>
<form>
<h3>기본 select 태그와 option 태그 </h3>
<label>국적 : </label>
<select name="nationality">
<option value="ko">한국</option>
<option value="ch">중국</option>
<option value="jp">일본</option>
<option value="etc" selected>기타</option>
</select>
<h2>textarea 태그</h2>
<p>
input type = "text" 와 비슷하지만 여러줄을 입력할 수 있음
</p>
<textarea cols="30" rows="10" style="resize:none;" required></textarea>
<!--
이제껏 한줄만 입력할 수 있는 텍스트 창과 달리 여러줄을 입력하는 작업도 가능하다.
이 텍스트 창은 모서리에 사이즈를 조절할 수 있도록 되어있는데 이를 방지하고싶다면
style을 이용해 입력창을 변경하지 못하도록 할 수 있다.
태그 사이에 입력한 내용은 사용자가 입력하기전에 미리 기본으로 떠있는
내용이다.
<textarea cols="30" rows="10" style="resize:none;" readonly>textarea 영역</textarea>
: readonly 태그는 입력을 못하고 읽는 행위만 가능한 속성이다.
<textarea cols="30" rows="10" style="resize:none;" required></textarea>
: required 태그는 반드시 입력하여 제출해야만 하도록 강제하는 속성이다.
-->
<input type="submit" value="제출">
</form>
<!--
- submit이 될때는 value 속성이 전달되어야 한다.
- 다른 약속된 값이 전달되길 원한다면 option의 속성에 value 값을 별도로 줄 수 있다.
- checked 처럼 select도 미리 기본적으로 선택 돼있도록 할 수 있다. -> selected
-->
</body>
</html>
<option></option>
작성
<select size=“숫자” id=“”>
<option value=“값”>표시내용</option>
<option value=“값”>표시내용</option>
<option value=“값” select>표시내용</option>
</select>
<optgroup></optgroup>
작성
<select size=“숫자” id=“”>
<optgroup label=“목록이름”>
<option value=“값”>표시내용</option>
<option value=“값”>표시내용</option>
</otpgroup>
<optgroup label=“목록이름”>
<option value=“값” select>표시내용</option>
<option value=“값” select>표시내용</option>
</otpgroup>
</select>
<datalist></datalist>
<option></option>
작성
<input type=“text” id=“ ” list=“datalistid값”>
<datalist id=“”>
<option value=“값” label=“명칭”></option>
<option value=“값” label=“명칭”></option>
</datalist>
button태그를 이용한 form 제출
작성
<form>
<button type=“submit” or “reset” class=“명칭”
id=“ ”>
<img src=“이미지 경로” alt=“”>“표시문구”
</button>
<form>
type=submit 과 차이
submit은 css를 이용하여 자유롭게 꾸밀 수 없음
<progress>
작업진행상태 나타내는 태그
작성
<progress value=“숫자” max=“숫자”>
<img src=“이미지 경로” alt=“”>“표시문구”
</progress>
'Programming > HTML5' 카테고리의 다른 글
| 8. 하이퍼링크태그 (0) | 2022.02.08 |
|---|---|
| 7. 멀티미디어 태그 (0) | 2022.02.08 |
| 6. 영역 분할 태그 (0) | 2022.02.08 |
| 5. TABLE태그 (0) | 2022.02.08 |
| 4. 목록 관련 태그 (0) | 2022.02.08 |
