Do it : HTML -4. 폼 관련 태그들

폼 만들기

 

form이란?

-사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소들을 폼이라고 한다 ex.로그인 폼, 회원가입 폼, 쇼핑몰 주문서 폼

-종류 :  사용자가 입력하는 부분/ 서버로 보내는 버튼 부분

 

 

form 태그 기본형

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

 

 

form 태그의 속성

-method : 서버로 어떻게 넘겨 줄지 지정

---"get" / "post" : 사용자가 입력한 내용이 드러나지 않는다

-name : 폼의 이름, 폼을 구분하기 위해 사용

-action : form을 처리해줄 서버 프로그램

-target : action에서 지정한 파일을 다른 위치에 열도록 지정

-autocomplete : 자동 완성 기능

 

 

label 태그 : 이름표 같은 텍스트

<label 속성="속성값"> 레이블 <input ...></label>

or

<label for="id이름"> 레이블 </label>

<input id="id이름" 속성="속성값">     : id속성을 통해 서로 연결한다

 

label태그를 이용해서 radio버튼, checkbox에 텍스트를 연결한다-> 텍스트만 터치해도 선택된다

<label><input type="radio" name="subject" value="eng">영어회화</label>

 

 

fieldset 태그 : 폼들을 하나의 영역으로 묶고 외곽선을 그린다

<fieldset 속성="속성값"> ... </fieldset>

 

 

legend 태그 : (fieldset 태그로) 묶은 그룹에 제목을 붙여준다

<fieldset>

    <legend>제목</legend>

    ...

</fieldset>

 

 

input 태그 : 폼에서 사용자 입력을 받는 태그, type속성을 이용해 다양한 폼 요소 만든다

id 속성 사용 : label 태그 이용해 캡션 붙이기, css 이용해 요소마다 꾸미기

 

 

input 태그의 type 속성 종류

-hidden : 사용자에게 보이지X, 서버로 넘겨지는 값

-text : 한줄짜리 텍스트 상자

-search : 검색상자

-tel :전화번호 입력 필드

-url : URL 입력 필드

-email : 메일 주소 입력 필드

-password : 비밀번호 입력 필드

-datetime : 날짜,시간 넣기(연, 월, 일, 시, 분, 초)(국제 표준시)

-datetime-local : 날짜,시간(연, 월, 일, 시, 분, 초)(사용자 지역)

-date : 날짜(연, 월, 일)

-month : 날짜(연, 월)

-week : 날짜(연, 주)

-time : 시간(시, 분, 초)

-number : 숫자 조절 화살표

-range : 숫자 조절 슬라이드 막대

-color : 색상표

-checkbox : 2개 이상 선택 체크박스

-radio : 1개만 선택 라디오 버튼

-file : 파일 첨부 버튼

-submit : 서버 전송 버튼

-image : submit 대신 서버 전송 이미지

-reset : 리셋 버튼

-button : 버튼

 

 

type="hidden" : 히든 필드

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

~name 속성 :이름 지정 

~value 속성 : 값 지정

 

type="text" : 텍스트 필드 (ex.아이디, 이름, 주소)

<input type="text" name="이름" size="5" value="" maxlength="10">

~name 속성 : 이름 지정 (구분 위해)

~size 속성 : 화면에 몇 글자가 보일 것인지 지정

~value 속성 : 텍스트 필드에 표시될 내용/ 안 쓰면 빈 텍스트 필드

~maxlength 속성 : 입력 가능한 최대 문자 개수

 

type="password" : 비밀번호 입력란 (*으로 표시된다)

<input type="'password" name="이름" size="5" maxlength="10">

~name, size, maxlength 속성

 

type="search" : 검색 상자

<input type="search">

+<input type="submit"  value="검색"> 같이 쓰임

 

type="url" : URL 입력란

<input type="url">

 

type="email" : 메일 주소 입력란

<input type="email">

 

type="tel" : 전화번호 입력란

<input type="tel" id="tel">

+<label for="tel">연락처</label> 같이 쓰임

 

type="number" : 숫자 입력 (작은 화살표 생긴다, 숫자 증감, 스핀박스)

<input type="number" min="1" max="5" value="1">

 

type="range" : 슬라이드 막대로 숫자 지정

<input type="range" min="1" max="50" value="1" step="10">

~min 속성 : 최솟값, 기본은 0

~max 속성 : 최댓값, 기본은 100

~value 속성 : 표시할 초기값

~step 속성 : 숫자 간격, 기본은 1, 생략 가능

 

type="radio" : 라디오 버튼 (한개만 선택)

<label><input type="radio" name="subject" value="speaking" checked>회화</label> :위치 조심

~name 속성 : 이름 지정(구분 위해), 관련 그룹은 같은 name 속성 값

~value 속성 : 필수, 서버로 넘길 때 값, 영문or숫자

~checked 속성 : 기본으로 선택해 놓을 항목을 정할 때 사용

 

type="checkbox" : 체크박스 (여러개 선택)

<input type="checkbox" name="" value="" checked>

 

type="color" : 색상 선택 상자 (16진수 표시)

<input type="color" value="#00ff00">

 

 

type="date" : 연, 월, 일 표시

<input type="date" value="" id="start"> +<input type="date" id="end">

~min, max, value, step

 

type="month" : 연, 월 표시

<input type="month">

~min, max, value, step

 

 

type="week" : 연, 주 표시 (1월 첫째 주를 기준으로 센다)

<input type="week">

~min, max, value, step

 

 

type="time" : 시간 지정

<input type="time" min="" max="" value="" step="">

~value 속성 : 초기값 지정, 24시간제, 18:00

 

type="datetime" : 시간, 날짜 지정

<input type="datetime" value="2020-09-08T15:20">

~min, max, value, step

 

 

type="datetime-local" : 시간, 날짜 지정(현지기준)

<input type="datetime-local">

~min, max, value, step

 

 

type="submit" : 정보 서버로 전송 버튼

<input type="submit" value="제출">

~value 속성 : 버튼이름

 

type="reset" : 입력 내용 삭제 버튼

<input type="reset" value="다시 입력">

~value 속성 : 버튼이름

 

type="image" : 전송 이미지 버튼 (이미지를 누르면 전송)

<input type="image" src="images/login.jpg" alt="대체 텍스트">

~src 속성 : 이미지 경로

 

type="button" : 버튼

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

자체 기능이 없기 때문에 스크립트 함수를 연결해 사용한다

 

type="file" : 파일 첨부 버튼

<input type="file">

 

 

autofocus : 입력 커서 표시

<input type="text" autofocus required>

 

placeholder : 흰트 표시 (로그인창에 아이디, 비밀번호 라고 써있다.)

<input type="text" placeholder="하이픈없이 입력">

 

readonly : 읽기 전용 필드

<input type="text" value-="오전 9:00~11:00" readonly>

 

required : 필수 필드 지정 ("이 입력란을 입력하세요" 라고 뜬다)

<input type="text" autofocus required>

 

min, max, step : 두 속성을 함께 써서 범위 제한, 일정한 간격 

~date, datetime, datetime-local, month, week, time, number, range 일 경우에만 사용

 

size, minlength, maxlength : 길이, 최소길이, 최대길이 

최소 몇글자, 최대 몇글자 입력 가능한지 알려준다

 

 

select 태그 : 여러 옵션 중에 선택, 드롭다운 목록의 처음과 끝에 있다

<select>

    <option></option>

    <option></option>

</select>

~size 속성 : 화면에 표시될 항목 개수

~multiple 속성 : 여러 항목 선택 가능 (ctrl 키 누른채로 선택)

 

option 태그 : 항목을 표시한다

<option value="" selected></option>

~value 속성 : 서버로 넘겨질 값

~selected 속성 : 기본으로 선택되어 있는 옵션

 

optgroup 태그 : 옵션끼리 묶기 (select 태그 안에서 option태그를 묶어준다)

<optgroup label="공과대학">

    <option>건축공학과</option>

    <option>기계공학과</option>

</optgroup>

~label 속성 : 그룹의 제목을 붙여준다

 

datalist 태그 : 데이터 목록의 값 중 선택하면 자동으로 입력된다

<input type="text" list="data id">

    <datalist id="data id">

        <option> ... </option>

        <option> ... </option>

    </datalist>

~input 태그와 함께 쓰인다

~id 속성으로 list 속성과 연결시킨다

 

textarea 태그 : 여러줄 입력하는 텍스트 영역 

<textarea name="" cols="60" rows="5"> 여러줄의 내용</textarea>

~name 속성 : 이름 지정

~cols 속성 : 가로 너비

~rows 속성 : 줄 개수 

 

button 태그 : 버튼(속성이 중요하다)

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

~submit 속성

~reset 속성

~button 속성

 

output 태그 : 계산 결과 (계산의 결과값이라는 것을 웹브라우저가 인식할 수 있다)

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">

    <input type="number" name="num1" value="0">

    +<input type="number" name="num2" value="0">

    =<output name="result"  for="num"></output>

</form>

~10+10=20

 

progress 태그 : 진행 상태 보여주기

<label>10초 남음</label>

<!--전체 60초 중 50초 진행-->

<progress value="50" max="60"></progress>

~value 속성 : 작업 진행 상태

~max 속성 : 작업 완료되려면 어느정도 필요한지 정도

 

meter 태그 : 값이 차지하는 크기 표시

<!--전체 크기 1을 기준으로 0.8만큼 차지한다-->

<meter value="0.8"></meter>

<!--전체 100 중에 64만큼 차지한다 -->

<meter min="0" max="100" value="64"></meter>

<!--전체 1 중에서 현재 0.5 차지함 적정도를 0.8로 설정했다 -->

<meter value="0.5" optimum="0.8"></meter>

~optimum 속성 : 이 정도면 적당하는 정도의 값

~value 속성 : 범위 내에서 차지하는 값

~min, max 속성 : 값을 정하지 않으면 0과 1로 간주한다

~low, high 속성 : 이 정도면 낮다, 높다는 정도의 값