html_study_d2

폼 삽입하기 |

폼을 만드는 <form> 태그

<form [속성="속성값"]>여러 폼 요소</form>
Copy

종류설명

method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다.
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다.
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다.
autocomplete	폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 자동 완성 기능을 지정합니다. 기본 속성값은 “on”입니다.

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

<fieldset>
    <legend>그룹 이름</legend>
</fieldset>
Copy

하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용합니다.
<legend> 태그는 다음과 같이 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있습니다.

폼 요소에 레이블을 붙이는 <label> 태그

<!-- 첫 번째 방법 -->
<label>레이블명<input></label>
<!-- 두 번째 방법 -->
<label for="id명">레이블명<input id="id명"></label>
Copy

<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.
<label> 태그는 2가지 방법으로 사용할 수 있습니다
1. 첫 번째 방법은 태그 안에 폼 요소를 넣는 것입니다.
2. 두 번째 방법은 <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것입니다.

<input> 태그의 type 속성 (1) |

텍스트와 비밀번호를 나타내는 type="text"와 type="password"

<input type="text">
<input type="password">
Copy

text 속성은 주로 한 줄짜리 일반 텍스트를 입력할 때 사용합니다.
password 속성은 비밀번호를 입력하는 필드를 넣을 때 사용합니다.

텍스트, 비밀번호 필드에서 사용하는 주요 속성종류설명

size	텍스트와 비밀번호 필드의 길이를 지정합니다. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정합니다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용입니다.
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정합니다.

<input> 태그의 type 속성 (2) |

다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"

텍스트 필드에서 세분화된 필드는 PC용 웹 브라우저에서는 큰 변화가 없는 것처럼 보입니다. 하지만 모바일 기기의 웹 브라우저에서 확인하면 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있습니다.

<input type="search">
<input type="url">
<input type="email">
<input type="tel">
Copy

search 속성은 검색할 때 입력하는 필드를 넣을 때 사용합니다.
url 속성은 웹 주소를 입력하는 필드를 넣을 때 사용합니다.
email 속성은 이메일 주소를 입력하는 필드를 넣을 때 사용합니다.
tel 속성은 전화번호를 입력하는 필드를 넣을 때 사용합니다.

<input> 태그의 type 속성 (3) |

체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"

체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소입니다.

<input type="checkbox">
<input type="radio">
Copy

checkbox 속성은 항목을 2개 이상 선택할 때 사용합니다.
radio 속성은 항목을 1개만 선택할 때 사용합니다.
체크 박스, 라디오 버튼에서 사용하는 속성종류설명
```
  | value    | 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다.     |
Copy
```
| checked | 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용합니다. |

<input> 태그의 type 속성 (4) |

숫자 입력 필드를 나타내는 type="number", type="range"

<input type="number">
<input type="range">
Copy

number 속성을 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있습니다.
range 속성을 사용하면 슬라이드 막대를 움직여 숫자를 입력할 수 있습니다.

숫자 입력 필드에서 사용하는 속성종류설명

min	필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다.
max	필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다.
step	숫자 간격을 지정할 수 있습니다. 기본값은 1입니다.
value	필드에 표시할 초깃값입니다.

<input> 태그의 type 속성 (5) |

날짜 입력을 나타내는 type="date", type="month", type="week"

<input type="date | month | week">
Copy

type="date" 로 지정하면 달력에서 날짜를 선택해서 입력할 수 있습니다. 날짜를 선택하면 필드에 “yyyy-mm-dd” 형식으로 연도, 월, 일이 표시됩니다.
type="month" 로 지정하면 달력에서 월을 선택해서 입력할 수 있습니다. 월을 선택하면 “yyyy-mm” 형식으로 연도, 월까지만 입력됩니다.
type="week" 로 지정하면 달력에서 주를 선택해서 입력할 수 있습니다. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됩니다.

시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"

<input type="time | datetime | datetime-local">
Copy

**type="time"**은 폼에서 시간을 입력하게 합니다.
type="datetime" 또는 type="datetime-local" 유형을 사용하면 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있습니다.
날짜와 시간의 범위를 지정하는 속성
| 종류 | 설명 |

종류설명

min	필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다.
max	필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다.
step	숫자 간격을 지정할 수 있습니다. 기본값은 1입니다.
value	필드에 표시할 초깃값입니다.

<input> 태그의 type 속성 (6) |

전송, 리셋 버튼을 나타내는 type="submit", type="reset"

<input type="submit | reset" value="버튼에 표시할 내용">
Copy

submit 속성은 <input>요소에 입력한 정보를 서버로 전송합니다.
reset 속성은 <input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.

<input> 태그의 type 속성 (7) |

이미지 버튼을 나타내는 type="image"

<input type="image" src="이미지 경로" alt="대체 텍스트">
Copy

image 속성은 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다.

input> 태그의 type 속성 (8) |

기본 버튼을 나타내는 type="button"

<input type="button" value="버튼에 표시할 내용">
Copy

button 속성은 기능이 없고 오직 버튼 형태만 삽입합니다.
주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다.

<input> 태그의 type 속성 (9) |

파일을 첨부할 때 사용하는 type="file"

<input type="file">
Copy

file 속성은 폼에서 사진이나 문서를 첨부해야 하는 경우에 사용합니다.

<input> 태그의 type 속성 (10) |

히든 필드 만들 때 사용하는 type="hidden"

<input type="hidden" name="이름" value="서버로 넘길 값">
Copy

히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소입니다.

<input> 태그의 주요 속성 (1) |

자동으로 입력 커서를 갖다 놓는 autofocus 속성

<input type=텍스트-입력-필드 autofocus required>
Copy

autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있습니다.

힌트를 표시해 주는 placeholder 속성

placeholder 속성을 사용하면 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있습니다.

<input> 태그의 주요 속성 (2) |

읽기 전용 필드를 만들어 주는 readonly 속성

<input type=텍스트-입력-필드 readonly>
Copy

readonly 속성은 해당 필드를 읽기 전용으로 바꿉니다.
readonly 속성은 간단히 readonly라고만 쓰거나 readonly="readonly", 또는 readonly="true"로 지정합니다.

필수 입력 필드를 지정하는 required 속성

required 속성은 해당 필드를 필수 필드로 바꿉니다.
required 속성은 간단히 required라고만 쓰거나 required="required"로 지정합니다.

폼에서 사용하는 여러 가지 태그 (1) |

여러 줄을 입력하는 텍스트 영역 <textarea> 태그

<textarea>내용</textarea>
Copy

<textarea> 태그를 사용하여 폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있습니다.
<textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용합니다.

폼에서 사용하는 여러 가지 태그 (2) |

드롭다운 목록을 만들어 주는 <select>, <option> 태그

드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙인 이름입니다.

<select>
    <option value="값1">내용1</option>
    <option value="값2">내용2</option>
    ......
</select>
Copy

<select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 드롭다운 목록을 표시합니다.
<option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정합니다.
<select> 태그의 속성종류설명

size 화면에 표시할 드롭다운 항목의 개수를 지정합니다.

multiple 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다.

<option> 태그의 속성종류설명

value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정합니다.
selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정합니다.

데이터 목록 만들어 주는 <datalist>, <option> 태그

데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있습니다.

<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
    <option value="서버로 넘길 값1">선택 옵션1</option>
    <option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>
Copy

<datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시하여 데이터 목록을 표시합니다.

폼에서 사용하는 여러 가지 태그 (3) |

버튼을 만들어 주는 <button> 태그

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
Copy

<button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있습니다.
<button> 태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다.

<button> 태그의 type 속성종류설명

submit	폼을 서버로 전송합니다. <input type="submit">과 같은 기능을 합니다.
reset	폼에 입력한 내용을 초기화합니다. <input type="reset">과 같은 기능을 합니다.
button	버튼 형태만 만들 뿐 자체 기능은 없습니다. <input type="button">과 같은 기능을 합니다.

<출처 & 공부한 사이트>

https://academy.elice.io/courses/7739/info

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스

한 권으로 끝내는 웹 기본 교과서

academy.elice.io

'학부생나부랭이 > _web_programing' 카테고리의 다른 글

css_study_d3_정리 (0)	2022.01.14
css_study_d2_정리 (0)	2022.01.07
css_study_d1_정리 (0)	2022.01.04
혼자 끄적여 본 html (0)	2022.01.03
html_study_d1_정리 (0)	2021.12.30

size	화면에 표시할 드롭다운 항목의 개수를 지정합니다.
multiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다.

html_study_d2_정리