-
[HTML] form 태그html, css, js 2023. 2. 10. 16:09
<Form>
- 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소를 모두 폼이라고 할 수 있다.
- 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만든다. 그러나 폼에 관련한 작업인 정보를 저장하거나 검색 수정하는 것은 모두 데이터베이스를 기반으로 하므로 폼에 입력한 사용자 정보는 JSP, PHP, Spring같은 백엔드 프레임워크를 이용해야한다.
폼을 만드는 <form> 태그
<form [속성 = "속성값"]>여러 폼 요소</form>
<form>태그의 속성
method 사용자가 입력한 내용을 server로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할수있는 속성값은 get,post이다.
get: 데이터를 256~4096byte까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.
post: 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다.name js로 폼을 제어할때 사용할 폼의 이름을 지정한다 action <form>태그 안의 내용을 처리해줄 서버 프로그램을 지정한다. target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다. autocomplete 폼에서 내용을 입력할대 예전에 입력한 내용을 자동으로 표시해 주는 기능이다. 기본 속성값은 "on"
<form action="" autocomplete="off"> </form>폼요소를 그룹으로 묶는 <fieldset> , <legend> 태그
<fieldset> : 하나의 폼 안에서 여러 구역을 나누어 표시할때 사용, 예를 들어 쇼핑몰 사이트에서 주문서를 작성할때 개인정보와 배송정보를 나누어 표시하는 경우
<legend> : <fieldset>태그로 묶은 그룹에 제목을 붙일 수 있다.
<body> <form action=""> <fieldset> <legend>상품 선택</legend> </fieldset> <fieldset> <legend>배송 정보</legend> </fieldset> </form> </body>
폼 요소에 레이블을 붙이는 <label> 태그
- <input>태그와 같은 폼 요소에 레이블을 붙일 떄 사용한다.
- 레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다. <label>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.
- <label>태그는 2가지 방법으로 사용할 수 있다.
1. 태그 안에 폼 요소를 넣는방법 <label>레이블명<input></label>
<label>아이디(6자이상)<input type="text"> </label>2. <lable>태그와 폼 요소를 따로 사용하고 <label>태그의 for속성과 폼 요소의 id속성을 이용해 서로 연결하는것
<label for="id명">레이블명<input id="id명"></label> 연결성에 가치가 있는 방법임 태그 둘이 멀리떨어져있어도 연결가능.
<label for="user-id">아이디(6자 이상)</label> <input type="text" id="user-id">
1,2모두 출력화면 같음 <input>
- 웹 폼의 다양한 곳에서 사용하는 <input>태그
- 웹 사이트에서 흔히 볼 수 있는 회원가입이나 로그인 화면, 검색창 등은 폼을 사용해 작성한다. 그중 Input태그를 사용
- <input>태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.
<input>태그의 다양한 type(유형)들을 알아보자
텍스트와 비밀번호를 나타내는 <input type="text"> ,<input type="password">
- 텍스트 필드는 폼에서 가장 많이 사용하는 요소이다. 주로 아이디나 이름, 주소 등 한줄 짜리 일반 텍스트를 입력할떄 사용한다.
- 비밀번호 필드는 입력하는 내용을 화면에 보여주지 않아야하므로 *나 ●로 표시하며 이 점을 제외하면 텍스트 필드와 똑같이 동작한다.
텍스트, 비밀번호 필드에서 사용하는 주요 속성
size 텍스트와 비밀번호 필드의 길이를 지정. 화면에 몇 글자가 보이도록 할 것인지를 지정한다. 예를 들어 글자수는 10개인데 size속성값을 5로지정하면 필드 크기는 5개 글자 크기에 맞추고 나머지 5개 글자는 화면에 보이지 않는다. value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됨. 비밀번호 필드에서 사용하지 않는 속성 maxlength 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정 <body> <form> <fieldset> <label>아이디: <input type="text" id="user-id" size="10"></label> <label>비밀번호: <input type="password" id="user-pw" size="10"></label> <input type="submit" value="로그인"> <!--type="submet" 전송타입을 넣습니다.--> </fieldset> </form> </body>
다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"
- 텍스트 필드는 한줄짜리 일반 텍스트를 입력할 수 있다. 하지만 폼을 만들다 보면 텍스트를 종류별로 세분화해야하는 경우가 존재한다.
- HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공한다. 위 필드들은 텍스트 필드를 기본으로 한다.
- 세분화된 필드는 pc용 웹브라우저에선 큰 변화가 없는것처럼 보여도 모바일 기기의 웹 브라우저에서는 이메일 주소를 입력하거나 전화번호를 입력할때 가상 키보드 배열이 다르게 바뀌는걸 볼 수 있다.HTML5이전에서는 입력값이 어떤 필드인지 일일이 js로 확인해야했지만 지금은 그럴 필요가없어진것.
<body> <form> <fieldset> <legend>배송 정보</legend> <ul> <li> <label for="user-name">이름</label> <input type="text" id="user-name"> </li> <li> <label for="addr">배송 주소</label> <input type="text" id="addr"> </li> <li> <label for="mail">이메일 주소</label> <input type="email" id="mail"> </li> <li> <label for="phone">연락처</label> <input type="tel" id="phone"> </li> </ul> </fieldset> </form> </body>
체크 박스와 라디오 버튼을 나타내는 <input type="checkbox">, <input type="radio">
- 항목을 1개만 선택하려면 라디오 버튼을 사용하고, 2개 이상 선택하려면 체크박스를 사용한다. 라디오 버튼은 항목을 1개만 선택할 수 있으므로 이미 선택한 항목이 있을 경우 다른항목을 선택하면 기존 항목은 취소된다.
체크 박스, 라디오 버튼에서 사용하는 속성
value 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정한다. 이 값은 영문이거나 숫자여야하며 필수속성이다. checked 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데 여러 항목중 기본으로 선택해놓고 싶은 항목에 사용한다. 속성값은 따로 없음 name 간혹 라디오 버튼에 name속성이 포함될 수 있다. 웹 프로그래밍에서 폼 요소를 제어할때 자주 사용되며 라디오 버튼에서 하나의 버튼만 선택할수있게 하려면 모든 라디오 버튼의 name값을 똑같이 지정해주면된다. <form> <fieldset> <legend>상품 선택</legend> <p><b>주문할 상품을 선택해 주세요.</b></p> <label><input type="checkbox" value="s_3">선물용 3kg</label> <label><input type="checkbox" value="s_5">선물용 5kg</label> <label><input type="checkbox" value="f_3">가정용 3kg</label> <label><input type="checkbox" value="f_3">가정용 5kg</label> <p><b>포장 선택</b></p> <label><input type="radio" name="gift" value="yes">선물 포장</label> <label><input type="radio" name="gift" value="no">선물 포장안함</label> </fieldset> </form>
그래서 name 속성이 뭔데?? 라고 물어볼수있을것이다. submit속성을 통해 선물포장에 체크하고 서버로 보내보면 알 수 있다.
위 url을 보면 라디오 버튼중 name= gift value=yes 인 호출이 5500포트를 통해 서버로 전달된걸 볼수있다. 만약 어떤 동작이 있다면 서버는 이 요청을 바탕으로 결과값을 리턴해서 웹 브라우저로 전달할것이다. 즉 name 속성은 웹 프로그래밍에서 폼요소를 제어할때 사용한다.
★ 간단한 회원가입 신청서를 만들어보자 type= "submit"은 제출 즉 서버로 전달, type= "reset"은 취소 즉 서버로 전달하지않음
<div id = "containder"> <h1>회원 가입을 환영합니다.</h1> <form> <fieldset> <legend>사용자 정보</legend> <ul> <li> <label for="uid">아이디</label> <input type="text" id="uid"> </li> <li> <label for="umail">이메일</label> <input type="eamil" id="umail"> </li> <li> <label for="pwd1">비밀번호</label> <input type="password" id="pwd1"> </li> <li> <label for="pwd2">비밀번호 확인</label> <input type="password" id="pwd2"> </li> </ul> </fieldset> <fieldset> <legned>이벤트와 새로운 소식</legned> <input type ="radio" name="mailing" id="mailing_y"> <label for="mailing_y">메일 수신</label> <input type ="radio" name="mailing" id="mailing_n"> <label for="mailing_n">메일 수신 안 함</label> </fieldset> <div id="buttons"> <input type="submit" value="가입하기"> <input type="reset" value="취소"> </div> </form> </div>숫자 입력 필드를 나타내는 type="number", type="range"
- type="number"를 사용하면 스핀박스가 나타나면서 숫자 선택가능
- type="range"를 사용하면 슬라이드 막대를 움직여 숫자 입력가능
숫자 입력 필드에서 사용하는 속성
min 필드에 입력할수있는 최소값을 지정. 기본최소값은 0 max 필드에 입력할수있는 최대값을 지정. 기본최대값은 100 step 숫자 간격을 지정. 기본값은 1 value 필드에 표시할 초깃값지정 <form> <fieldset> <ul> <li> <label><input type ="checkbox" value="s_3">선물용 3kg</label> <input type="number" min="0" max="5" >개(최대 5개) </li> <li> <label><input type ="checkbox" value="s_5">선물용 5kg</label> <input type="number" min="0" max="3" value="1" >개(최대 3개) </li> </ul> </fieldset> <fieldset> <ul> <li> <label><input type="checkbox" value="f_3">가정용 3kg</label> <input type="range" min="0" max="5" value="1">개 (최대 5개) </li> </ul> </fieldset> </form>
날짜 입력을 나타내는 type="data", type="month", type="week"
- type="data" 로 지정하면 달력에서 날짜를 선택하여 입력할 수 있다. 날짜를 선택하면 필드에 yyyy-mm-dd 형식으로 연도 월 일이 표시
- type="month"로 지정하면 달력에서 월을 선택해서 입력할 수 있다. 월을 선택하면 yyyy-mm 형식으로 연도 월까지만 입력됨
- type="week"로 지정하면 달력에서 주를 선택하여 입력할수있다. 주를 선택하면 1월 첫째주 기분으로 몇번째 주인지 표시됨
<form> <fieldset> <input type="date"> <input type="month"> <input type="week"> </fieldset> </form>
시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"
type="time"은 폼에서 기간을 입력하게 한다. 첫번째 항목부터 오전과 오후를 의미하고 나머지는 시와 분을 의미한다. (시간 지정)
type="datetime" or type="datetime-local" 유형은 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할수있다.
<input type="time"> <input type="datetime-local">
날짜와 시간 범위를 지정하는 속성
min 날짜나 시간의 범위를 제한할때 사용, min-시작 날짜나 시간을, max-마지막날짜나 시간을 지정 max step 스핀 박스의 화살표를 클릭했을때 증감시킬 크기 지정 value 기본적으로 표시할 날짜나 시간 지정 <input type="date" min="2020-02-01" max="2020-02-15">전송 리셋 버튼을 나타내는 type="submit ,type="reset"
- 전송 버튼을 나타내는 submit은 폼에입력한 정보를 서버로 전송한다. submit 버튼으로 전송된 정보는 form태그의 action속성에서 지정한 폼 처리 프로그램으로 넘겨진다.
- 바면 reset버튼은 input요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다. 이때 value속성을 사용하면 버튼에 표시할 내용을 지정할수있다. (value="주문하기")
이미지 버튼을 나타내는 type="image"
- type="image"는 submit버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.
- <input type="image" src="이미지 경로" alt="대체 텍스트">
<label>아이디: <input type="text" id="user-id" seize="10"></label> <label>비밀번호: <input type="password" id="user-pw" seize="10"></label> <input type="image" src="images/login.png" alt="로그인">
기본 버튼을 나타내는 type="button"
type="button"은 submit 이나 rest버튼과 같은 기능이 없고 오직 버튼 형태만 삽입한다. 주로 버튼을 클릭해서 js를 실행할때 사용한다.
<form> <input type="button" value="공지 창 열기" onclick="window.open('study.html')"> </form>
파일을 첨부할때 사용하는 type="file"
폼에 사진이나 문서 등 파일을 첨부할 수 있다.
<input type="file">히든 필드 만들때 사용하는 type="hidden"
- 히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과함께 서버로 전송되는 요소이다.
- 사용자에게는 굳이 보여줄필요없지만 서버 관리자가 알아야하는 정보를 히든필드로 입력한다.
<input type="hidden" name ="이름" value="서버로 넘길 값"><input>태그의 주요 속성들
자동으로 입력 커서를 갖다 놓는 autofocus속성
- 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수있다.
- <input type="텍스트-입력-필드" autofocus required>
힌트를 표시해주는 placeholder속성
- 사용자가 텍스트를 입력할때 입력란에 적당한 힌트 내용을표시해서 그 필드를 클릭하면 내용이 사라지게끔 만들 수 있다. 사용자에게 해당 필드에 어떤 내용을 입력해야하는지 알려 줄 수 있어 편리함
<ul> <li> <label for="user-name">이름</label> <input type="text" id="user-name" autofocus> </li> <li> <label for="phone">연락처</label> <input type="tel" id="phone" placeholder="하이픈 빼고 입력해주세요.(01012345678)"> </li> </ul>
읽기 전용 필드를 만들어 주는 readonly 속성
- 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다.
- readonly속성은 해당 필드를 읽기 전용으로 바꾸어, 텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용을 볼수만 있고 입력할 수 없다. readonly속성은 간단히 readonly라고 쓰거나, readonly="readonly", readonly="true"로 지정할수있음
필수 입력 필드를 지정하는 required 속성
- 내용을 폼에 입력한 후 submit버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야한다. 이렇게 반드시 입력해야 하는 내용에는 required속성을 지정해 필수 필드로 만들어주어야한다.
<form> <fieldset> <legned>배송정보</legned> <ul id="shipping"> <li> <label for="prod">주문 상품</label> <input type="text" id="prod" value="상품용 3KG" readonly> </li> <li> <label for="user-name">이름</label> <input type="text" id="user-name" autofocus required> </li> <li> <label for="addr">배송 주소</label> <input type="text" id="addr" required> </li> <li> <label for="mail">이메일</label> <input type="email" id="mail"> </li> <li> <label for="phone">연락처</label> <input type="tel" id="phone" placeholder="하이픈 빼고 입력해주세요" required> </li> <li> <label for="d-day">배송지정</label> <input type="date" id="d-day"><small>(주문일로부터 최소 3일 이후)</small> </li> </ul> </fieldset> <div> <input type="submit" value="주문하기"> <input type="reset" value="취소하기"> </div> </form>
★ 회원 가입 신청서를 만들어보자
<body> <h1>회원 가입을 환영합니다</h1> <form> <fieldset> <legned>사용자 정보</legned> <ul> <li> <label for="uid">아이디</label> <input type="text" id="uid" autofocus placeholder="4자~10자 사이, 공백없이"required> </li> <li> <label for="mail">이메일</label> <input type="email" id="mail" required> </li> <li> <label for="pwd1">비밀 번호</label> <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required> </li> <li> <label for="pwd2">비밀 번호 확인</label> <input type="password" id="pwd2" required> </li> </ul> </fieldset> <fieldset> <legned>이벤트와 새로운 소식</legned> <input type="radio" name="mailing" id="mailing_y" value="maling_yes"> <label for="mailing_y">메일 수신</label> <input type="radio" name="mailing" id="mailing_n" value="maling_no" checked> <label for="mailing_n">메일 수신</label> </fieldset> <div> <input type="submit" value="가입하기"> <input type="reset" value="취소"> </div> </form> </body>폼에서 사용하는 여러가지 태그
여러 줄을 입력하는 텍스트 영역<textarea>태그
폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수도 있다. 게시판에서 글을 입력하거나 회원 가입 양식에서 아용자 약관을 표시할때 자주 사용한다.
<textarea>태그의 속성
cols 텍스트 영역의 가로 너비를 문자 단위로 지정, col에서 지정하는 글자 수는 영문자 기준이다. 예를 들어 cols="40"으로 설정하면 한글은 20글자 영어는 40글자정도이다. 또한 사용자의 글꼴이나 글자 크기에 따라 달라질 수 있다. rows 텍스트 영역의 세로 길이를 줄 단위로 지정 , 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김 <label for="memo">메모</label> <textarea id="memo" cols="40" rows="4"></textarea>
드롭다운 목록을 만들어주는 <select>, <option> 태그
- 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다.
- 드롭다운 목록은 목록을 클릭했을때 옵션이 요소 아래족으로 펼쳐진다. <select>태그와 <option>태그를 이용해 표시한다.
- <select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option>태그를 사용해 원하는 항목을 추가한다. <option>태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정한다.
<select>태그의 속성 - 드롭다운 목록의 크기나 선택할 항목의 개수 조절
size 화면에 표시할 드롭다운 항목의 개수를 지정한다. multiple 드롭다운 목록에서 둘 이상의 항목을 선택할떄 사용한다. <option>태그의 속성 - 드롭다운 목록에 표시되는 옵션
value 해당 항목을 선택할때 서버로 넘겨줄 값을 지정함 selected 드롭다운 메뉴를 삽입할때 기본적으로 선택해서 보여줄 항목을 지정 <select id="prod1"> <option value="special_3" selected>선물용 3kg</option> <option value="special_5">선물용 5kg</option> <option value="family_3">가정용 3kg</option> <option value="family_5">가정용 5kg</option> </select>
데이터 목록을 만들어 주는 <datalist>, <option> 태그
기본형 <input type="text" list="데이터 목록 id"> <datalist id= "데이터 목록 id"> <option value="서버로 넘길 값></option> </datalist>- 드롭다운 목록과 거의 유사하게 동작
- 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.
- <datelist>태그를 이용해 데이터목록의 시작과 끝을 표시하고 그 사이<option>를 사용해 각데이터의 옵션을 표시한다. 이때 value속성을 사용해 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.
<label for="prod2">포장 여부</label> <input type="text" id="prod2" list="pack"> <datalist id="pack"> <option value="package">선물 포장</options> <option value="no_package">포장 안함</options> </datalist>버튼을 만들어 주는 <button> 태그
- button 태그의 type속성은 버튼이 활성화되었을때 어떤 동작을 할지 결정한다. 만약 지정하지않으면 submit을 선택한 것으로 간주한다.
- submit - 폼을 서버로 전송 / reset - 폼에 입력한 내용을 초기화 / button- 버튼 형태만 만들뿐 자체 기능은없음
- <input type="submit"> <input type="reset"> <input type="button"> 와 동일하게 동작
- 화면 낭독기로 웹 문서를 읽어 줄댸 button태그를 만나면 이 부분에 버튼이 있다는것을 알고 정확히 전달한다. 또한 폼뿐만 아니라 버튼이 필요한 웹 문서 어디든지 다양하게 사용가능하며, 콘텐츠를 포함할수있어 아이콘을 추가하거나 css를 활용해 원하는 형태로 꾸밀수도있다.
<button type="submit">주문하기</button>★ 5장 마무리문제 1
<body> <h1>예약 정보</h1> <form> <fieldset> <ul> <li> <label for="r-name">이름</label> <input type="text" id="r-name"> </li> <li> <label for="r-phone">전화</label> <input type="tel" id="r-phone"> </li> <li> <label for="r-email">이메일</label> <input type="email" id="r-email"> </li> <li> <input type="submit" value="예약하기"> </li> </ul> </fieldset> </form> </body>★ 5장 마무리문제 2
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>수습 국원 모집 정적페이지</title> <style> #container { width:520px; border:1px solid black; padding:20px 40px; margin:0 auto; } fieldset { margin-bottom:15px; } legend { font-weight:bold; } ul {list-style-type: none;} li { line-height:30px;} </style> <body> <div id="container"> <h1>프론트엔드 개발자 지원서</h1> <p>HTML,CSS,JS기술을 이해하고 실무경험이 있는 분을 찾<br>습니다.</p> <hr> <form> <h4>개인정보</h4> <ul> <li> <label for="name">이름</label> <input type="text" placeholder="공백 없이 입력하세요."> </li> <li> <label for="phone">연락처</label> <input type="tel"> </li> </ul> <h4>지원 분야</h4> <ul> <li> <input type="radio" name="field" id="publising_y" value="an"> <label for="publising_y">웹 퍼블리싱</label> </li> <li> <input type="radio" name="field" id="application_create_y" value="pd"> <label for="application_create_y">웹 애플리케이션 개발</label> </li> <li> <input type="radio" name="field" id="improve_y" value="eng"> <label for="improve_y">개발 환경 개선</label> </li> </ul> <legend>지원 동기</legend> <textarea id="memo" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요"></textarea> <h4>지원 동기</h4> <div> <button type="submit">접수 하기</button> <button type="reset">다시 쓰기</button> </div> </form> </div> </body> </html>
지금까지는 HTML에 대해 공부해 보았다. HTML은 프론트엔드영역으로 보여지는 웹 사이트의 구조를 구축한다.
다음장에서는 CSS로 구축한 구조에 디자인을 입히는 방법을 공부할것이며, 지금까지 공부한 정적인 페이지가아닌
사용자의 클릭에 따라 페이지가 동작하는 동적페이지는 js로 공부하게될것이다.
'html, css, js' 카테고리의 다른 글
[CSS] 텍스트를 표현하는 다양한 스타일 (0) 2023.02.14 [CSS] 스타일 시트 종류/ CSS 기본 선택자 / 스타일 우선순위 (0) 2023.02.12 [HTML] HTML 태그 모음 (0) 2023.02.09 [HTML] 웹 문서에, 내용 입력하는 태그들 (0) 2023.02.09 [HTML] 기본 구조 태그들 (0) 2023.02.03