폼 삽입(form)

 

폼 삽입하기 

 

(1) <form> 태그

: 정보를 제출하기 위하여 어디서부터 어디까지가 양식인지 지정하는 역할 

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

 

[속성]

 

• Action 속성 <form action="서버"></form>

:  양식 데이터를 처리할 서버 프로그램의 주소 

 

• Autocomplete : 자동완성 기능(기본으로 on -> 끌려면 off해야됨)

<form action="" autocomplete="off">

 

(2) <fieldset>, <legend>

 

• <fieldset [속성="속성값"]</fieldset> :하나의 폼 안에서 여러 구역 나누어 표시

 

<fieldset>

 

• <legend>그룹 이름</legend> : 묶은 그룹에 제목 붙일 수 있음

</fieldset>

 

(3) <label>

 

: 폼 요소에 레이블 붙일 때 사용 ( 입력 받는 필드 설명) 

 

• 태그안에 폼 요소 넣는 방법

<label>레이블명<input></label>

 

• 레이블과 폼 요소 따로 사용/ 레이블 태그의 for속성과 폼 요소의 id 속성 연결

<label for = "id명">레이블명<input id = "id명"></label>

 

 

"id명"이 동일해야함

 

(4) Input 태그

: 데이터를 입력 받을 수 있음 

<input 속성="속성이름">

 

• Type 속성 : 어떤것을 입력 받을지

<input type="text">

 

기본

Input 태그의 주요 속성 (Form 데이터 태그 속성) 

 

(1) autofocus

 

페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터 표시 가능

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

 

(2) placeholder

 

사용자가 텍스트 입력 전에 입력란에 문구 띄우고 그 필드 클릭하면 사라지도록 만드는 기능

 

(3) readonly

 

사용자가 입력하지 못하고 읽게만 하도록

 

(4)required

 

필드 지정해서 사용자가 입력란에 입력 안했으면 오류 띄우기

 

(5) disabled

비활성화 시킬 수 있으며 해당 필드는 전송되지 않는다 

 

Type  종류

Text : 주로 한 줄 텍스트

 

Password : 안 보이게

 

Search : 웹브라우저가 검색을 위한 텍스트 필드로 인식

 

Url : 웹 주소 입력

 

Email : 이메일 주소입력

 

Checkbox : 2개이상의 항목 선택

 

Radio : 항목 1개 선택

 

Value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정해줌 ( 영문 혹은 필수 속성)

 

Number: 박스 나타나면서 숫자 선택 가능

 

Range: 슬라이드 막대 나타나면서 막대 움직여 숫자 입력 가능

 

Date,month,week : 날짜 입력

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

 

Time,datatime,datatime-local: 시간

- <input type = "time |datatime | datatim-local">

 

Submit : 폼에 입력한 정보를 서버로 전송

 

Reset: 입력된 정보를 재설정해서 사용자가 입력한 내용 지우는 역할

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

 

Image : submit 버튼과 같은 기능(단지 이미지를 submit부분에 추가해서 이미지 누르면 폼 보내는 것)

 

Button: 기본 버튼(submit/reset 버튼과 같은 기능 x, 형태만 삽입)

 

File : 파일 첨부 할 수 있게 하는 기능

 

Hidden : 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소 (관리자가 알아야 하는 정보)

 

 

 

 

폼에서 사용하는 여러가지 태그

(1)< textarea>

 

여러 줄 입력 가능한 영역 생성

 

Rows -> 줄 개수 (초과시 스크롤 막대 생성)(세로)

 

Cols-> 너비 크기 (가로)

 

(2) <select>

 

드롭 다운 목록 생성

 

드롭 다운 목록의 시작과 끝 표시

 

Size-> 화면에 표시할 드롭다운 항목의 개수 지정

 

Multiple -> 둘 이상의 항목 선택할 때 사용

 

(3)<option>

 

<select> 안에 <option> 사용해 원하는 항목 추가

 

value -> 해당 항목 선택시 서버로 넘겨주는 값 지정

 

Selected-> 메뉴 삽입할 때 기본적으로 선택해서 보여 줄 항목 지정

 

(4)<datalist>

 

텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값중에서 선택 가능

 

(5) <button>

 

버튼 삽입 , <form>내부는 물론이고 버튼 기능이 필요한 곳이라면 어디든 사용 가능 

 

Submit : 기본

 

Reset :  <input type = "reset"> , 모든 입력 필드를 초기값으로 되돌림 

 

button : 기본 행동이 없으며 주로 클릭한 후 js 측 코드에 의해 사

< button 클릭시 페이지 이동>

HTML

복사

캡션

 

<button onclick = "location.href='./내용증명.html'" id="b">내용증명</button> // 현재 페이지에서 다른 페이지로 이동하기

​

현재 페이지에서 다른 페이지으로 이동하기 <button onclick="location.href='index.html'">text</button >

새 페이지에서 다른 페이지 열기 <button onclick="window.open('index.html')">text</button >

현재 페이지 새로고침 <button onClick="location.reload();">text</button >

뒤로 가기 <button onClick="history.back();">text</button >

뒤로 1번 가기 <button onClick="history.go(-1);">text</button >

<!-- a 태그 -->

현재 페이지에서 다른 페이지으로 이동하기 <a href="#" onclick="location.href='index.html'">text</a>

새 페이지에서 다른 페이지 열기 <a href="#" onclick="window.open('index.html')">text</a>

현재 페이지 새로고침 <a href="#" onClick="location.reload();">text</a>

뒤로 가기 <a href="#" onClick="history.back();">text</a>

뒤로 1번 가기 <a href="#" onClick="history.go(-1);">text</a>

 

 

 

*** 폼이 들쭉날쭉 하다

→ 레이블 / 입력 필드

CSS

복사

캡션

 

레이블{ float:left; width: 110px; //width 속성 지정하여 레이블이 차지하는 크기 지정

​