1. HTML Forms
[1] HTML FORMS
1) Forms
: 웹 페이지에서 사용자의 입력을 받는 형식
- 예시) 로그인, 검색, 예약 등
2) Form elements
: 폼을 구성하는 다양한 태그
- 예시)
<input>, <textarea>, <select>등
3) 속성
- name : 폼의 이름 지정
- action : 폼 데이터를 처리할 서버 응용 프로그램 이름
- 사용자가 입력한 데이터를 처리할 프로그램, URL 경로, 문서명을 담는다.
- method : 전송 방식 post / get 중에 하나 선택
- post : HTTP로 데이터를 전송하는 표준 입력 방식
- get : URI로 데이터를 전송하는 입력 방식
- elements : 입력 폼의 요소인 텍스트, 버튼, 체크박스, 라디오 버튼, 보내기, 리셋 등을 나타내는ㄴ 속성
- target : action에 짖어된 것이 실행되는 곳을 지정
4) post / get 메소드 차이
[2] Input elements, Type attributes
1) text
<label name="name">이름 : </label>
<input type = "text" name = "name">2) radio
<input type="radio" name="menu" value="coffee"><span>coffee</span>
<input type="radio" name="menu" value="latte"><span>latte</span>
<input type="radio" name="menu" value="milk tea"><span>milk tea</span>3) password / email / url
<span>password</span><input type="password" name = "pwd">
<span>email</span><input type="email" name="email">
<span>url</span><input type="url" name="url">
``
#### 4) submit
```html
<input type = "submit" value = "Submit">[3] Forms, Submit
1) <form action = "action.html">
: Submit 버튼이 실행되면, attributes action에 정의된 프로그램이나 문서가 열려서 실행된다.
2) <form action = "action.html" target = _blank>
: target을 지정하지 않으면 현재 창에서 실행, _blank를 지정하면 새로운 탭에서 실행된다.
3) <input type = "text" name = "name">
: attribute name에 값이 지정되지 않으면, 입력한 값이 전송되지 않는다.
[4] HTML fieldset, legend
1) fieldset
: form 태그에서 관련 있는 요소 (elements)들을 그룹화할 때 사용한다.
2) legend
: 그룹화한 폼 요소들의 목적에 맞게 이름을 지정할 때 사용한다.
[5] 예시
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
The Starbuzz Bean Machice
</title>
</head>
<body>
<h1>
스타버즈 커피 공장
</h1>
<h2>
양식을 채운 후 주문을 버튼을 클릭하세요
</h2>
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<p>
커피 선택 :
<select name="beans">
<option value="House" blend="Blend">
House Blend</option>
<option value="Bolivia">
Shade Grown Bolivia Supermo</option>
<option value="Guatemala">
Organic Guatemala
</option>
<option value="Kenya">
Kenya
</option>
</select>
</p>
<p>
Type :
<br>
<input type="radio" name="beantype" value="whole">분쇄하지 않은 커피
<input type="radio" name="beantype" value="ground" checked="checked">분쇄한 커피
</p>
<p>
상품 개수 :
<input type="number" name="bags" min="10">
</p>
<p>
배송 일자 :
<input type="date" name="date">
</p>
<p>
기타 :
<br>
<input type="checkbox" name="extras[]" value="giftwrap">
선물 포장
<br>
<input type="checkbox" name="extras[]" value="catalog" checked="checked">
카탈로그 포함
</p>
<p>
배송지 주소 :
<br>
이름:
<input type="text" name="name" value=""><br>
주소 :
<input type="text" name="address" value><br>
도시 :
<input type="text" name="city" value=""><br>
지역 :
<input type="text" name="state" value=""><br>
우편번호 :
<input type="text" name="zip" value=""><br>
전화번호 :
<input type="tel" name="phone" value=""><br>
</p>
<p>
고객 요구사항 :
<br>
<textarea name="phone"></textarea>
</p>
<p>
<input type="submit" value="주문">
</p>
</from>
</body>
</html>
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com