본문 바로가기
WEB

[HTML] form 폼 / 폼 요소 작성하기 / form, label, input

yo~og 2021. 10. 7. 16:06

폼 (form) 이란 ,

사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 사용자가 웹사이트에 데이터를 전송하기위해 폼을 사용한다.

 

폼 예제

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

action : 데이터를 보낼 URI 또는 HTML 링크 지정

name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송

method : 전송 방법 설정. get/post

autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용

 

폼 안에는 LABEL 요소와 다양한 타입의 INPUT 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

LABEL 요소

라벨 요소는 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 표시한다. 

<label for="email">이메일</label>
<input type="text" id="email" name="email">

for 속성에 email을 주고 input type="text"의 id 값을 email로 작성한다.

 

for 속성을 사용하지 않고 LABEL 사용하기

<label> 태그를 <input> 태그 바깥에 사용하면 for 속성을 사용하지 않아도 된다.

<label>
	<input type="checkbox" name="hobby" value="soccer"> 축구
</label>
<label>
	<input type="checkbox" name="hobby" value="baking"> 베이킹
</label>

INPUT 요소

1. 텍스트 입력(text)

2. 비밀번호 입력(password)

3. 라디오 버튼(radio)

4. 체크박스(checkbox)

5. 파일 선택(file)

6. 선택 입력(select)

7. 문장 입력(textarea)

8. 버튼 입력(button)

9. 전송 버튼(submit)

10. 필드셋(fieldset)

이 외에도 reset(취소), color, range, date, time, number등이 존재한다.

 

 

 

텍스트 입력 (text)

사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

<form action="/examples/media/request.php">
    검색할 내용을 입력하세요 :
    <input type="text" name="search">
</form>

 

비밀번호 입력 (password)

사용자로부터 비밀번호를 입력받을 수 있다. 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.

<form>
    사용자 : <br><input type="text" name="username"><br>
    비밀번호 : <br><input type="password" name="password">
</form>

 

라디오 버튼(radio)

사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.

이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

<form>
    <input type="radio" name="lecture" value="html" checked> HTML <br>
    <input type="radio" name="lecture" value="css"> CSS <br>
    <input type="radio" name="lecture" value="java"> JAVA <br>
    <input type="radio" name="lecture" value="cpp"> C++
</form>

 

체크박스(checkbox)

사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.

이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.

<form>
    <input type="checkbox" name="lecture" value="html" checked> HTML <br>
    <input type="checkbox" name="lecture" value="css"> CSS <br>
    <input type="checkbox" name="lecture" value="java"> JAVA <br>
    <input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>

 

파일 선택(file)

사용자로부터 파일을 전송받을 수 있다.

accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

<form>
    <input type="file" name="upload_file" accept="image/*">
</form>

 

선택 입력(select)

여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.

option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

<select name="fruit">
    <option value="apple"> 사과
    <option value="orange" selected> 귤
    <option value="strawberry"> 딸기
    <option value="peach"> 복숭아
</select>

 

문장 입력(textarea)

사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.

rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.

<textarea name="message" rows="5" cols="30">
    여기에 적으세요.
</textarea>

 

버튼 입력(button)

사용자가 누를 수 있는 버튼을 나타낸다.

<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
    버튼을 눌러주세요.
</button>

 

전송 버튼(submit)

사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있다.

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.

이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

<form action="/examples/media/request.php">
    어릴 때 자신의 별명을 적어주세요 : <br>
    <input type="text" name="nickname" value="별명"><br><br>
    <input type="submit" value="전송">
</form>

 

필드셋(fieldset)

fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.

legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타낸다.

<form action="/examples/media/request.php">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

 

적용예제

Step09_form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_form.html</title>
</head>
<body>
    <h1>폼(form) 요소 작성하기</h1>
    <!-- 
        form 은 서버에 전송할 양식이다
        action="서버에 전송할 위치(요청경로)"  
        현재는 서버가 없기 때문에 action 을 테스트 할수는 없다. 
    -->
    <form action="login.jsp">
        <!-- 
            label 의 for 속성의 값과
            input 의 id 속성의 값과 동일하게 작성이 되어야 된다.
        -->
        <label for="email">이메일</label>
        <input type="text" id="email" name="email">
        <!-- 
            name 속성의 값은 서버에서 필요한 값이다. 
        -->
        <label for="pwd">비밀번호</label>
        <input type="password" id="pwd" name="pwd">
        
        <button type="submit">로그인</button>
        <button type="reset">취소</button>
    </form>
</body>
</html>

Step09_form2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_form2.html</title>
    <style>
        #comment{
            width: 500px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>회원 가입 폼 입니다.</h1>
    <form action="signup.jsp">
        <label for="email">이메일</label>
        <input type="text" id="email" name="email"><br>
        <!-- 
            fieldset , legend 요소가 왜 필요한지와
            label 텍스트를 제공하는 새로운 방법을 익히세요
            input type="radio" 에서 name 속성의 값이 같으면 
            같은 그룹으로 묶인다.
        -->
        <fieldset>
            <legend>성별 정보 선택</legend>
            <label>
                <!-- value="선택 했을때 서버에 전송할 문자열" --->
                <input type="radio" name="gender" value="man" checked> 남자
            </label>
            <label>
                <input type="radio" name="gender" value="woman"> 여자
            </label>
        </fieldset>
        <!-- 
            input type="checkbox" 는 name 속성의 값이 모두 같아도 
            그룹으로 묶이지 않는다.
        -->
        <fieldset>
            <legend>취미 정보 선택</legend>
            <label>
                <input type="checkbox" name="hobby" value="soccer"> 축구
            </label>
            <label>
                <input type="checkbox" name="hobby" value="baking"> 베이킹
            </label>
            <label>
                <input type="checkbox" name="hobby" value="piano"> 피아노
            </label>
            <label>
                <input type="checkbox" name="hobby" value="etc"> 기타
            </label>
        </fieldset>
        <label for="job">직업선택</label>
        <select name="job" id="job">
            <option value="">선택</option>
            <option value="programmer">프로그래머</option>
            <option value="doctor">의사</option>
            <option value="pianist">피아니스트</option>
            <option value="etc">기타</option>
        </select>
        <br>
        <label for="lunch">점심 선택</label>
        <!-- option 에 value 가 없으면 innerText 가 전송된다. -->
        <select name="lunch" id="lunch">
            <optgroup label="분식">
                <option>라면</option>
                <option>쫄면</option>
                <option>김밥</option>
            </optgroup>
            <optgroup label="중식">
                <option>자장면</option>
                <option>짬뽕</option>
                <option>군만두</option>
            </optgroup>
        </select>
        <br>
        <label for="myFile">첨부파일</label>
        <input type="file" id="myFile" name="myFile">
        <br>
        <label for="comment">하고 싶은말</label>
        <br>
        <textarea name="comment" id="comment"></textarea>
        <br>
        <button type="submit">가입</button>
    </form>
</body>
</html>

 

Step09_form3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_form3.html</title>
</head>
<body>
    <h1>html5 에서 추가된 form 요소</h1>
    <form action="insert.jsp">
        <label for="color">색상선택</label>
        <input type="color" id="color" name="color">
        <br>
        <label for="range">범위</label>
        <input type="range" id="range" name="range" min="10" max="100" step="1" value="10">
        <br>
        <label for="date">날짜</label>
        <input type="date" id="date" name="date">
        <br>
        <label for="time">시간</label>
        <input type="time" id="time" name="time">
        <br>
        <label for="number">숫자</label>
        <input type="number" id="number" name="number" min="0" max="100" step="10">
        <br>
        <button type="submit">저장</button>
    </form>
</body>
</html>

저작자표시 비영리 변경금지

'WEB' 카테고리의 다른 글

[JavaScript] 함수  (0) 2021.10.07
[HTML] a / anchor / 하이퍼링크 / 책갈피 / 전화, 메일 화면 이동  (0) 2021.10.07
[CSS] border-collapse (collapse, separate)  (0) 2021.10.07
[HTML] table의 모든 것 - <tr>,<th>,<td>,<thead> , <tbody>,<tfoot>,<caption>,<colgroup>,colspan, rowspan  (0) 2021.10.06
[HTML] 목록 만들기 / ul, ol, dl  (0) 2021.10.06

'WEB' Related Articles

티스토리툴바