HTML & CSS/Do it! 시리즈

[두잇 HTML5+CSS3 웹표준의 정석] HTML Part4

옝닝 2022. 1. 19. 23:16
폼 만들기

폼이란?

: 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 말합니다. (로그인버튼, 회원가입 창 등)

 

<form> 태그 

: 폼 만들기

-<form></form> 태그 사이에 폼 요소와 관련된 태그를 넣습니다.

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

 

form 태그 속성

method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.

속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4096byte까지의 데이터만 넘길 수 있다.
post - 대부분 이 방식 사용한다. 사용자의 입력을 표준입력으로 넘기기 때문에 입력 내용의 길이에 제한받지 않고 사용자가 입력한 내용이 드러나지 않는다.
name 여러개의 <form>태그가 있을 경우 구분하기 위해서 사용한다.
action 내용들을 처리해 줄 프로그램을 지정한다.
target 현재 창이 아닌 다른 위치에 열도록 지정한다.

 

autocomplete 속성

: 자동 완성 기능

- 이전에 입력했던 내용이 아래에 표시된다. 기본값이 "on"이고 비밀번호 같이 유출되기 곤란한 것은 "off"로 지정하면 된다.

<form action="register.php" autocomplete="off">
  ....
</form>

 

<label> 태그

: 폼 요소에 레이블 붙이기

<label [속성="속성 값"]> 이름 <input ...></label>

또는

<label for="id 이름"> 이름 </label>
<input id="id 이름" [속성="속성값"]

 

라디오 버튼과 체크박스에서 사용하는 <label> 태그

체크박스 : 

- <label> 태그를 사용하지 않는다.

-텍스트만 클릭하면 선택되지 않고 체크박스를 클릭해야한다.

예시)

<ul>
<li><input type="checkbox" value="grm">문법</li>
<li><input type="checkbox" value="wr">작문</li>
<li><input type="checkbox" value="rd">독해</li>
</ul>

라디오 버튼 :

- <label> 태그를 사용할 수 있다.

-텍스트만 클릭하여도 선택된다.

예시)

<ul>
<li>
<label><input type="radio" name="subject" value="eng">영어회화</label>
</label>
<li>
<label><input type="radio" name="subject" value="ch">중국회화</label>
</label>
<li>
<label><input type="radio" name="subject" value="jp">일본회화</label>
</label>
</ul>

 

<fieldest>, <legend> 태그

: 폼 요소 그룹으로 묶기

- 예를 들어 '사용자 정보' 와 '배송지 정보'와 같이 정보를 나누어 표시할 때 사용한다.

  화면을 깔끔히 정리 할 수 있고 폼 안에서 여러구역을 나누어 표시할 때 사용한다.

 

예시)

<fieldest>
<legend>개인 정보</legend>
<ul>
    <li>
        <label for="name">이름</label>
        <input type="text" id="name">
    <li>
    <li>
        <label for="email">메일 주소</label>
        <input type="text" id="email">
    <li>
</ul>
</fieldest>

 

 

<input> 태그

 

id 속성 사용하기

-여러번 사용된 폼 요소를 구분하기 위해 사용합니다. (폼뿐만 아니라 html 문서 안의 모든 요소에서 사용한다.)

한개 이상의 문자여야 하고 공백이 있어선 안됩니다.(예시: user-name)

 

type="hidden"

: 히든 필드 만들기

-화면상에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 함께 전송되는 요소입니다.

굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 입력한다.

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

 

type="text"

: 텍스트 필드 만들기

-한줄짜리 일반 텍스트를 입력하는 필드이다. 

name 필드를 구별할 수 있도록 이름을 붙입니다.
size 텍스트 필드의 길이를 지정합니다. 화면데 몇글자가 보이도록 할 것인지를 지정한다. 예를 들어서 최대 입력 가능한 글자수를 10개인데 size를 5로 지정하면 5개 글자만 화면에 보이고 나머지 5글자는 보이지않는다.
value 텍스트 필드 부분에 표시될 내용이다.
maxlength 최대 문자 개수를 지정한다.

 

type="password" 

:비밀번호 입력란 만들기

-화면에 내용이 표시되지 않는다.

 

type="search"

: 검색상자 만들기

-텍스트 상자를 넣은 것과 똑같이 보이지만 크롬 브라우저나 MS 엣지 브라우저 등 일부 브라우저에서는 검색 창에 검색어를 입력했을 때 오른쪽에 X가 표시되어 입력했던 검색어를 손쉽게 지울 수 있습니다.

 

type="url"

:URL 입력란 만들기

-전혀 공백이 없고 영문자와 마침표, 슬래시로만 이루어져있다. 또한 반드시 "http://"로 시작하는 사이트 주소를 입력해야한다.

 

type="email"

: 메일 주소 입력란 만들기

-메일 주소 형식에 맞는지 자동으로 체크해준다.

 

type="tel"

: 전화번호 입력란 만들기

-일반 텍스트가 아니라 전화번호라는 사실을 인식한다.

 

type="number"

: 숫자 입력하기

-입력창에 숫자를 직접 입력하는것이 기본적이지만 브라우저에 따라서 스핀 박스가 표시되기도 한다.

예시)

<input type="nember" min="1" max="1" value="1">

 

type="range"

: 슬라이드 막대로 숫자 지정하기

-막대를 움직여 숫자 값을 입력하게 된다.

 

min 필드에 입력할 수 있는 최솟값을 지정하며 기본 최솟값은 0이다.
max 필드에 입력할 수 있는 최댓값을 지정하며 기본 최솟값은 100이다.
step 짝수나 홀수 등 특정 숫자로 제한하려할 때 숫자 간격을 지정할 수 있다.
value 필드에 표시할 초기값이다.

 

type="radio", type="checkbox"

: 라디오 버튼과 체크박스 넣기

<input type="radio" [속성="속성값"]
<input type="checkbox" [속성="속성값"]
name 여러개 있을 경우, 구분하기 위해 이름을 지정합니다. 라디오 버튼은 여러개 중에서 하나만 선택하는 것이기 때문에 관련있는 그룹끼리는 name 속성값을 똑같이 만든다.
value 서버로 알려줄 때 넘길 값을 지정한다. 이것은 필수 속성이다.
checked 처음에 기본으로 선택해 놓을 항목이 있을 때 사용한다.

 

type="color"

: 색상 선택 상자 표시하기

-사용자가 색상을 선택할 수 있게 해준다. 

<input type="color" [value="기본 색"[속성="속성값"]>

 

type="date", type="month", type="week"

: 날짜 표시하기

<input type="dateㅣmonthㅣweek" [value="기본값" 속성="속성값"]
date 날짜를 선택한다. yyy-mm-dd
month 월과 연도를 선택한다. yyy-mm
week 주와 연도를 선택한다. yyy-W00

 

type="time", type="datetime", type="datetime-local"

: 시간 지정하기

<input type="timeㅣdatetimeㅣdatetime-local" [value="기본값" 속성="속성값"]
min 날짜나 시간의 최솟값을 지정한다.
max 날짜나 시간의 최댓값을 지정한다.
step 스핀 박스의 화살표를 누를 때마다 얼마나 조절할지 지정한다.
value 화면에 표시할 초기값을 지정한다. tiem일 경우는 00:00~23:59이고datetime과 datetime-local은 날짜를 적고 T를 쓴 후 24시간제로 시간을 지정한다. (예: 2016-03-23T16:00)

 

type="submit", type="reset"

: 서버 전송, 리셋 버튼 넣기

<input type="submitㅣreset" [value="버튼 내용"][속성="속성값"]>

 

type="image"

: 이미지 버튼 넣기

<input type="image" src="이미지 경로" alt="대체 텍스트" [속성="속성 값"]>

 

type="file"

: 파일 첨부하기

<input type="file" [속성="속성 값"]>

 

type="button"

: submit이나 reset 같이 버튼 자체에 기능이 없고 오직 버튼만 넣기 ㄸㅐ문에 스크립트 함수 등 연결해 사용해야한다.

<input type="button" [value="버튼 내용"][속성="속성 값"]>

onclick을 추가해 새창을 여는 window.open()함수를 연결한다.

<input type="button" value="새 탭 열기" onclick="window.open()">

 

 

<input> 태그의 다양한 속성

 

autofocus 속성

:입력커서 표시하기

-텍스트 필드에 마우스 커서가 표시된다.

 

예시)

<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus required>

 

placeholder 속성

: 힌트 표시하기

-적당한 힌트 내용 표시하다가 필드를 클릭하면 내용이 사라진다.

 

예시)

<label class="reg" for="uid">학번</label>
<input type="text" id-"uid" placeholder="하이픈없이 입력">

 

readonly 속성

: 읽기 전용 필드 만들기

-사용자가 입력하지 못하고 읽게만 만들 수 있습니다. 입력은 할 수 없게 하는 것이다. readonly="true", readonly="false", readonly="readonl", readonly 다 가능하다.

 

예시)

<label class="reg" for="subj">영어회화</label>
<input type="text" id="subj" value="오전 9:00~11:00" readonly>

 

required 속성

: 필수 필드 지정하기

-필수적으로 입력해야 하는 내용에는 required="required" 또는 required 속성을 지정해야한다.

 

min, max, step 속성

: 최솟값, 최댓값, 숫자의 일정한 간격 지정

- date, datetime, datetime-local, month, week, time, number, range에만 사용할 수 있다.

 

size, minlength, ,axlength 속성

:길이, 최소길이, 최대길이를 지정한다.

 

 

 

 

여러 데이터 나열해 보여주기

 

<select>, <optgroup>, <option>

: 사용자가 내용을 입력하는 것이 아니라 여러 옵션중에서 선택하도록한다.

- <option> 태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정한다.

<select 속성="속성값">
    <option value="값" [속성="속성값"]> 내용1 </option>
    <option value="값" [속성="속성값"]> 내용2 </option>
    <option value="값" [속성="속성값"]> 내용3 </option>
</select>

 

<select> 태그의 속성

size 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
-크롬 브라우저의 경우 size에서 지정한 개수보다 하나 더 많은 옵션이 표시된다. size="3"으로 지정하면 4개의 옵션이 표시된다.
multiple 컨트롤 키를 누른상태로 여러항목을 선택할 수 있다.

 

<option> 태그의 속성

value 옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected 화면에 표시될 때 기본으로 선택되어있는 옵션을 지정한다.

 

<optgroup> 태그의 속성

-여러 항목들을 몇 가지 그룹으로 묶어야 할 경우에 사용한다. label 속성을 사용해 그룹의 제목을 붙입니다.

 

예시)

<optgroup label="공과대학">

 

<datalist>, <option>태그

- text 필드와 함께 사용하기 때문에 <input> 태그와 함께 사용한다. <input> 태그의 list 속성값과 데이터 목록의 id를 같게 만든다.

<input type="text" list="">
    <datalist id="">
        <option> </option>
        <option> </option>
        <option> </option>
    </datalist>

 

value  서버로 넘겨질 값을 지정한다.
label 브라우저에 표시할 레이블입니다. 따로 지정하지 않을 경우, value 값을 레이블로 사용합니다. 
<option value="grammer" label="문법"></option>

태그와 태그 사이에 텍스트를 적는 <select> 태그와는 달리 label 속성으로 지정하여 텍스트를 적는다.

 

<textarea> 태그

: 여러줄 입력하는 텍스트 영역 만들기

name 다른 폼 요소와 구분하기 위해서 텍스트 영역의 이름을 지정한다.
cols 텍스트 영역의 가로너비를 문자 단위로 지정한다.
rows 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 것보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

 

<textarea name="intro" cols="60" rows="5"> 
...
</textarea>

 

 

 

기타 다양한 폼 요소들

 

<button> 태그

: 버튼 넣기

- <input> 태그로 버튼을 삽입하는 것과 비슷해 보이지만 <button>태그를 이용하면

1. 화면 낭독기에서 '이 부분에는 버튼이 있다는 것'을 알고 정확히 전달할 수 있다.

2. 아이콘을 추가할 수 있다.

 

submit 폼을 서버로 전송한다.
reset 폼에 입력한 모든 내용을 초기화한다.
button 버튼 형태만 만들 뿐 자체 기능은 없다.

 

예시)

<form>
    <button type="submit" class="subm">
    <img src="" alt=""> 전송하기 </button>
</form>

 

<progress> 태그

: 진행 상태 보여주기

value 0보다 크거나 같고 max보다 작거나 같아야한다. 값이 지정되지 않았다면 이 값은 1.0보다 작아야한다.
max 작업이 완료되려면 얼마나 많은 작업을 해야하는지 표현한다. 0보다 커야한다.

 

예시)

<label> 10초남음 </label>
<!--전체 60초 중 50초 진행-->
<progress value="50" max="60"></progress>

 

<meter> 태그

: 값이 차지하는 크기 표시

- 전체 크기 중 얼마나 차하는지 표시할 때 사용한다

min, max 최솟값과 최댓값을 나타내며 지정하지 않을 경우 0과 1로 간주합니다.
value 범위 내에서 차지하는 값을 나타냅니다.
low "이정도면 낮다"라고 할 정도의 값을 지정한다.
high "이정도면 높다"라고 할 정도의 값을 지정한다.
optimum "이정도면 적당하다"라고 할 정도의 값을 지정한다.