HTML #2
폼 정의
폼이란 입력, 출력을 지원하는 양식 및 사용자와 상호작용이 이루어지는 영역 전반을 이름.
HTML 본문에 위치하며 폼 영역을 구성하는 태그는 <form> … </form>을 사용.
=> [form] name=“폼명”: 폼명을 지정하는 속성. 웹페이지에 여러개의 폼이 있는 경우 각각의 폼을 구분하기 위해 사용.
=> [form] method=“전송 방식”: 폼 입력 데이터의 서버 전송 방식을 지정. GET 방식과 POST 방식이 있음. 기본은 GET.
=> [form] action=“프로그램명”: 폼 입력 데이터를 처리할 서버용 프로그램(CGI, ASP, PHP 등)을 지정하는 속성. 서버와 사용자 간의 상호 정보 교환을 실행
=> [form] novalidate: ‘유효성 검사 안 함’을 지정(기본값: 유효성 검사 함)
필드 셋과 캡션
필드 셋은 입력, 출력 등의 여러 폼 양식 요소를 함께 묶어 그룹화하여 범위를 지정한 것
<fieldset> … </fieldset> 태그 사용
그룹화 한 범위의 캡션은 <legend> … </legend> 태그 사용
<fieldset>
<legend> 폼 캡션 </legend>
입력 양식 : <input type="text" />
</fieldset>
입출력 폼
사용자의 데이터를 받아들이거나 내보내기 위해서는 구성된 폼 영역 내부에 양식을 만들어 주어야 함
즉, 사용자가 처리할 데이터의 종류에 따라 양식을 선택하여 작성함
1. input
- 사용자의 입력을 받아들이는 양식을 만들고, 어떤 종류의 데이터를 입력받을 것인지를 type 속성을 이용해 지정
- 종료 태그 없는 홑 태그
=> type=“입력 타입”: 입력 영역과 타입을 지정. text, password, check-box, radio, submit, reset, file, email, url, number, range, tel, date, time 등의 종류가 있음
=> name=“이름”: 입력 필드의 이름을 나타냄. 서버로 전송될 때의 변수명으로 사용되며, 웹 페이지 내에서 중복된 이름 사용 가능
=> id=“id 명”: 입력 필드의 아이디명을 지정하며 유일한 명칭을 사용해야 함
=> size=“ 값”: 입력 필드의 크기를 지정
=> value=“문자열”: 입력 필드의 초기 문자열 지정
=> maxlength=“값”: 입력 필드의 최대 문자열 길이 지정
=> autofocus: 입력 필드 로드시 필드에 커서를 자동으로 표시하는 기능
=> placeholder=“문자열”: 입력 힌트 문자열 표시 기능
=> checked: 항목 입력 필드에 선택 표시를 지정
=> required: 입력 필드 내용의 작성 여부 체크
1. 텍스트 & 암호
=> type=“text”: 입력 필드에 한 줄로 작성한 텍스트를 그대로 입력받는 양식
=> type=“password”: 한 줄로 작성한 텍스트를 ‘●’로 표시하여 입력받는 양식
<h1> 로그인 폼 </h1>
<form>
ID : <input type="text" size="16" maxlength="10" value="id" />
<br /> <br />
PASS : <input type="password" name="p1" size="12" />
</form>
2. 라디오 & 체크박스
=> type=”radio": 제시된 여러 항목 중 하나의 항목만을 선택할 때 사용
=> type=“checkbox”: 제시된 여러 항목 중 사용자가 원하는 여러 개의 항목을 다중으로 선택할 때 사용
=> value=“값”: 서버로 전송되는 값을 지정하는 옵션으로 필수적으로 지정해야함. 선택한 항목이 어떤 것인지 구별 할 수 있도록 각각의 value 값을 다르게 설정해야 함.
=> name=“이름”: 선택할 항목에 이름을 부여하는 것으로 같은 이름을 부여한 2개 이상의 항목들이 하나의 그룹으로 인식되어 처리됨.
<body>
<form>
<h1> 성별 구분 </h1>
<input type="radio" name="ra_btn" value="1" checked /> 남자 <br />
<input type="radio" name="ra_btn" value="2" /> 여자 <p>
<h1> 취미 활동을 선택하세요. </h1>
<input type="checkbox" name="ch_btn" value="1" checked /> 등산 <br />
<input type="checkbox" name="ch_btn" value="2" checked /> 골프 <br />
<input type="checkbox" name="ch_btn" value="3" /> 마라톤 <p>
</form>
</body>
3. submit & reset
- submit은 사용자가 입력한 모든 데이터를 서버로 전송하는 버튼 양식. type=“submit" 지정.
- reset은 작성한 모든 데이터 내용을 지우고 초기화하는 버튼 양식. type=“reset” 지정.
4. email & url
- email은 이메일 주소를 입력받는 양식. type=“email” 지정.
- url은 웹페이지의 주소를 입력받는 양식. type=“url" 지정.
- 두 양식은 유효성 검사를 하는 기능이 있어서 입력 형식에 오류가 있으면 에러를 반환함
=> placeholder: 입력 힌트. 사용자에게 입력 예시를 보여줌
=> required: 해당 필드를 필수 입력 사항으로 지정
<body>
<form method="post" action="./action.php">
<label for="e_id"> 이메일 보내기 </label>
<input type="email" id="e_id" name="e_name" placeholder="abc@abc.com" required />
<br />
<br />
<label for="u_id"> 인터넷 사이트 이동하기 </label>
<input type="url" id="u_id" name="u_name" placeholder="http:// " required />
<br />
<br />
<input type="submit" value="확인" />
</form>
</body>
5. number & range
- number는 사용자의 수치 데이터 입력을 쉽게 하기 위해서 스핀 컨트롤을 클릭하거나 직접 숫자를 입력하는 양식. type=“number” 지정.
- range는 슬라이드 컨트롤로 숫자의 크고 작은 정도를 표현하는 입력 양식. type=“range” 지정
<form>
<label for="num_id"> 숫자 입력(스핀 컨트롤) </label>
<input type="number" id="num_id" min="0" max="10" step="2" value="2" /> <br />
<br />
<label for="r_id"> 숫자 입력(슬라이드 컨트롤) </label>
<input type="range" id="r_id" min="0" max="100" step="10" /> <br />
<input type="submit" value="확인" />
</form>
6. file & search
- file은 사용자의 컴퓨터에 있는 파일을 선택하여 서버에 전송하는 양식. type=“file” 지정
- search는 찾고자 하는 정보의 검색 단어를 입력하는 텍스트 필드 양식. type=“search" 지정.
=> multiple: 여러 파일을 한 번에 선택할 수 있는 기능
<form>
파일 선택 : <input type="file" />
<br />
<br />
이미지 파일 선택(multiple) : <input type="file" accept="image/*" multiple />
<br />
<br />
<input type="search" />
<input type="submit" value="검색" />
<input type="reset" value="다시 입력" />
</form>
7. 날짜 & 시간
- 사용자가 달력 폼, 스핀 컨트롤 등을 활용해 날짜와 시간을 편리하게 선택하여 입력받는 폼.
- 속성값 종류에는 date, month, week, time, datetime 등이 있음
2. output
- 폼 이벤트 처리 결과를 화면에 출력하거나 value 속성을 이용하여 관련 있는 요소들의 수치 계산 결과를 보여주는 역할을 함
- input 태그의 id 속성값과 output 태그의 for 속성값을 동일하게 지정함으로써 입력 폼과 출력 폼을 상호 연계하고, id와 for의 속성값을 폼 이벤트의 변수로 사용하여 연산 결과를 처리할 수 있음
=>
<form>
<label> 좋아하는 과목 이름을 입력하세요. </label>
<br />
<input type="text" id="class" />
<br />
<br />
<table border="1">
<tr>
<th> 입력한 내용은 : </th>
<td>
<output for="class" onForminput="value=class.value"> 입력 결과 </output>
</td>
</tr>
<tr>
<th> 입력한 글자 수는 : </th>
<td>
<output for="class" onForminput="value=class.value.length"> 글자 수 </output>
</td>
</tr>
</table>
</form>
목록 & 텍스트 영역 폼
폼을 구성하는 양식에는 입력 폼, 출력 폼 외에도 목록과 텍스트 영역 폼을 만들어주는 select, datalist, textarea 태그가 있음
1. select
- 콤보 박스와 리스트 박스의 목록 폼을 만들 때 사용.
=> name=“이름”: 콤보 박스와 리스트 박스의 이름 지정
=> size=“값”: 목록 크기를 지정하여 형태를 결정
=> multiple: 여러 개의 목록을 선택하는 기능을 제공
=> [option] value=“값”: 서버로 넘겨지는 값 결정
<form>
<label> 당신의 혈액형을 선택하세요. </label>
<br />
<select name="combo_box">
<option value="a"> A형 </option>
<option value="b"> B형 </option>
<option value="o"> O형 </option>
<option value="ab"> AB형 </option>
</select>
<br />
<br />
<label> 좋아하는 언어를 선택하세요.(다중 선택) </label>
<br />
<select name="list_box" size="4" multiple>
<option value="1"> C </option>
<option value="2"> C# </option>
<option value="3"> C++ </option>
<option value="4"> HTML </option>
<option value="5"> Python </option>
<option value="6"> ASM </option>
</select>
</form>
2. datalist
- 텍스트 입력 필드에 데이터 선택 목록이 나타나도록 함
- input 태그의 list 속성과 datalist 태그의 id 속성 값을 동일하게 부여해 입력 필드와 데이터 목록이 연계되도록 함
<form>
<fieldset>
<legend> 가장 좋아하는 언어는? </legend>
<input type="text" name="lang" list="talent" />
<datalist id="lang">
<option value="C">
<option value="C++">
<option value="C#">
<option value="HTML">
<option value="Python">
</datalist>
<br />
<br />
<label> 당신의 선택은? : </label>
<output for="lang" onForminput="this.value=lang.value">
</output>
</fieldset>
</form>
3. textarea
- 텍스트 영역 폼을 만들어 줌
- 텍스트 필드의 성격을 가지고 있으면서 여러 줄을 입력받는데 사용됨
=> name=“이름”: 텍스트 영역의 이름 지정
=> rows=“줄 수”: 텍스트 영역의 줄 수 지정(기본값: 1). 내용이 박스의 크기를 넘으면 자동으로 스크롤바 생김
=> cols=“칸 수”: 텍스트 영역의 칸 수를 지정(기본값: 1)
<form>
<h2> 메모장 </h2>
<textarea name="textarea_1" rows="5" cols="50"> 의견을 남겨 주세요.
</textarea>
</form>
'Programming > Web Programming' 카테고리의 다른 글
| JavaScript Basic #1 (0) | 2017.07.13 |
|---|---|
| CSS #2 (0) | 2017.07.12 |
| CSS #1 (0) | 2017.07.12 |
| HTML Basic #3 (0) | 2017.07.10 |
| HTML Basic (0) | 2017.07.05 |
