본문 바로가기
Learning/HTML&JavaScript

폼 관련 태그들

cozy coding 2020. 7. 14. 16:01

  • <form>태그: 폼을 만드는 기본 태그. 

    • method: 사용자가 입력한 내용들을 서버 프로그램으로 어떻게 넘겨줄지 지정

      • get: 사용자가 입력한 내용이 그대로 표시

      • post: 입력 내용의 길이에 제한 X, 입력한 내용 표시 X

    • name: 폼의 이름 지정

    • action: 폼 내용들을 처리해줄 서버 상의 프로그램 지정

    • target: 현재 창이 아닌 다른 위치에 열도록 지정

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>label 태그 사용</title>

        <style>

            ul {

                list-style:none;

            }

            li {

                margin:20px;

            }

        </style>

</head>

<body>

    <form>

        <h3>수강분야(다수 선택가능)</h3>

        <ul>

            <li><input type="checkbox" value="grm">문법</li>

            <li><input type="checkbox" value="wr">작문</li>

            <li><input type="checkbox" value="rd">독해</li>

        </ul>

        <h3>수강과목(1과목만 선택가능)</h3>

        <ul>

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

            <li><input type="radio" name="subject" value="chn">중국어회화</li>

            <li><input type="radio" name="subject" value="jap">일어회화</li>

        </ul>

    </form>

</body>

</html>

  • <fieldset>: 폼 요소를 그룹으로 묶는 태그

  • <legend>: 필드셋의 제목을 붙이는 태그

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>filedset과 legend 태그</title>

        <style>

            ul {

                list-style:none;

            }

            li {

                margin:20px;

            }

            li label {

                width:80px;

                float:left;

            }

            fieldset {

                margin:15px;

            }

        </style>

</head>

<body>

    <form>

    <fieldset>

        <legend>개인정보</legend>

        <ul>

            <li>

                <label for="name">이름</label>

                <input type="text" id="name">

            </li>

            <li>

                <label for="mail">메일주소</label>

                <input type="text" id="mail">

            </li>

        </ul>

    </fieldset>

    <fieldset>

        <legend>로그인 정보</legend>

        <ul>

            <li>

                <label for="id">아이디</label>

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

            </li>

            <li>

                <label for="pw">비밀번호</label>

                <input type="text" id="pw">

            </li>

        </ul>

    </fieldset>

    </form>

</body>

</html>

  • <input> 태그: 입력하는 부분. 내용의 종류는 type속성을 통해 지정

    • hidden: 사용자에게 보이지 않고 서버로 넘겨짐

    • text: 텍스트필드

    • search: 검색 상자

    • email: 메일 주소 입력

    • password: 비밀번호 입력

    • tel: 전화번호 입력 필드

    • checkbox: 체크박스

    • submit: 서버 전송 버튼

    • image: submit 버튼 대신 사용할 이미지 삽입

    • reset: 리셋 버튼

    • button: 버튼

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>filedset과 legend 태그</title>

        <style>

            ul {

                list-style:none;

            }

            li {

                margin:10px;

            }

            li label {

                width:120px;

                float:left;

                text-align: right;

                padding-right: 8px;

            }

            fieldset {

                margin:15px;

            }

            input{

                width:200px;

            }

            input[type="submit"]{ 

                text-align: center;

                width: 100%;

                height: 30px;

                margin-top: 15px;

            }

        </style>

</head>

<body>

    <form>

    <fieldset>

        <legend>로그인 정보</legend>

        <ul>

            <li> 

                <label for="id">아이디</label>

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

            </li>

            <li>

                <label for="pw1">비밀번호</label>

                <input type="password" id="pw1">

            </li>

            <li>

                <label for="pw2">비밀번호 확인</label>

                <input type="password" id="pw2">

            </li>

        </ul>

    </fieldset>

    <fieldset>

        <legend>개인정보</legend>

        <ul>

            <li>

                <label for="name">이름</label>

                <input type="text" id="name">

            </li>

            <li>

                <label for="mail">메일주소</label>

                <input type="email" id="mail">

            </li>

            <li>

                <label for="phone">연락처</label>

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

            </li>

            <li>

                <label for="homep">블로그/홈페이지</label>

                <input type="url" id="homep"> <!--정확한 홈페이지 주소를 입력받기 위함-->

            </li>

        </ul>

    </fieldset>

    <input type="submit" value="가입하기">

    </form>

</body>

</html>

 

 

<!doctype html>

<html lang="ko">

  <head>

        <meta charset="utf-8">

     <title> 웹 폼</title>

     <style>

     body {

        background-color:#fff; 

     }

     form fieldset{

        margin-bottom:25px; 

     }   

     form legend{

        font-size:15px;

        font-weight:600; 

     }

     form label.reg {

        font-size:14px;

        color:#390;

        font-weight:bold;

        width:110px;

        float:left;

        text-align:right;

        margin-right:10px;

     }

     form ul li{

        list-style:none; 

        margin: 15px 0; 

        font-size:14px; 

     }

     

     #member, #stuffs {

        width:50px; 

     }

     

     #pre {

        margin-left:15px;

     }

     </style>

  </head>

  <body>

    <form>

        <fieldset>

            <legend>신청 과목</legend>

            <p>이 달에 신청할 과목을 선택하세요(1과목만 가능)</p>

            <label><input type="radio" name="subject" value="spk">회화</label>

            <label><input type="radio" name="subject" value="grm">문법</label>

            <label><input type="radio" name="subject" value="wr">작문</label>

        </fieldset>

        <fieldset>

            <legend>메일링</legend>

            <p>메일로 받고 싶은 뉴스 주제를 선택하세요 (복수 선택 가능)</p>

            <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>

            <label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>

            <label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>

        </fieldset>

    </form>

  </body>

</html>

 

 

 

 

<!doctype html>

<html lang="ko">

  <head>

     <meta charset="utf-8">

     <title> 웹 폼</title>

  </head>

  <body>

    <form>

      <fieldset>

        <legend>과 티셔츠 설문</legend>

        <p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해주세요</p>

        <label>선호색상<input type="color" value="#00FF00"></label>

      </fieldset>

    </form>

  </body>

</html>

 

 

 

 

 

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>date</title>

</head>

<body>

    <form>

        <fieldset>

            <legend><h3>조회기간 선택</h3></legend>

            <label>시작: <input type="date" id="start" value="2020-07-01"></label>

            <label>끝: <input type="date" id="end" value="2020-12-31"></label>

        </fieldset>

        <fieldset>

            <legend><h3>대관시간 선택(오늘)</h3></legend>

            <label>시작 시간 <input type="time" value="09:00" id="start"></label>

            <label>종료 시간 <input type="time" value="18:00" id="end"></label>

        </fieldset>

        <fieldset>

            <legend><h3>대관시간 선택(다른날짜)</h3></legend>

            <label>시작 시간<input type="datetime-local" value="2020-07-01T09:00"></label>

            <label>종료 시간<input type="datetime-local" value="2020-12-31T09:00"></label>

        </fieldset>

    </form>

</body>

</html>

 

 

 

  • input 타입 중 submit: 제출

  • input 타입 중 reset: 취소 (쓴 내용을 지움)

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>전송 - 리셋 </title>

    <style>

        body {

            padding:20px;

        }

    </style>

</head>

<body>

    <form action="register.asp" method="post">

        <fieldset>

            <h3>메일링 리스트 등록</h3>

            <label> 메일 주소 <input type="email"></label>

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

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

        </fieldset>

    </form>

</body>

</html>

 

 

  • input 타입 중 image: 버튼 대신 이미지 삽입

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>이미지 버튼 </title>

    <style>

        table {

            border:0;

        }

        td {

            padding:5px 10px;

            border:0;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <td>

                <label>아이디 <input type="text" size="15"></label>

            </td>

            <td>

                <label>비밀번호 <input type="password" size="15"></label>

            </td>

            <td>

                <input type="image" id="button" src="images/login.jpg" alt="login">

            </td>

        </tr>

    </table>

</body>

</html>

 

 

  • button 타입 중 onclick 속성: 함수 연결

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>폼 버튼 </title>

    <style>

        li{

            list-style: none;

            padding: 10px;

        }

    </style>

</head>

<body>

    <form>

        <ul>

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

            <li><input type="button" value="탭 닫기" onclick="window.close()"></li>

        </ul>

    </form>

</body>

</html>

 

 

 

 

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

'Learning > HTML&JavaScript' 카테고리의 다른 글

스타일과 스타일시트 글꼴  (0) 2020.07.17
<datalist>가 있는 신청서 폼  (0) 2020.07.17
이미지와 하이퍼링크  (0) 2020.07.14
표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>)  (0) 2020.07.07
목록태그(<ul>,<li>,<ol>), 설명목록(<dl>,<dt>,<dd>), 표를 만드는 태그(<table>,<tr>,<td>,<colspan>)  (0) 2020.07.07

'Learning/HTML&JavaScript' Related Articles

티스토리툴바