[HTML] form, optgroup, option, datalist, fieldset, legend

allrouvel 2024. 2. 15. 18:19

2024. 2. 15. 18:19

728x90

form요소에 사용되는 요소들
- 전송에 해당되는 input이나 button등의 submit속성이 있어야 데이터 전송을 할 수 있다.
- input요소의 name속성과 value가 있어야 데이터를 서버측에서 전달 받을 수 있다.
- form컨트롤 요소들이 form 안에 있어야만 데이터를 서버측에 전달할 수 있다.

<!-- action="나의페이지경로"

method="get"

target="_self"

autocomplete="on"

이 숨어져있음 -->

입력요소 - input, select, textarea

데이터를 입력할 수 있는 기능을 가진 입력요소들(입력태그들)은 반드시 form태그 안에 컨텐츠로 있어야 한다.

main - index page

html 컴파일없이 브라우저로 전송

name은 중복값을 가질 수 있다.

id속성은 중복값을 가질 수 없다.

**폼태그의 입력요소로 전송하는 데이터는 모두 문자열로 전송됨.

**텍스트입력요소에 값을 기입하지 않고 전송하는 경우는 빈 문자열값으로 전송됨(null아님)

form
데이터를 전송하기 위한 조건 1. 입력요소들이 반드시 form태그 안에 존재해야 한다. 2. 입력요소 안에 반드시 name속성이 존재해야 한다. **name속성이 자바에서 데이터를 가져올 때 필요한 파라미터(매개변수)역할을 한다. 3. 반드시 폼태그 안에 submit이 존재해야 한다.
action
- 나의 데이터를 전송할 페이지 경로를 기술하는 속성 - 내가 이동할 페이지 경로를 기술하는 속성
method
- 내가 입력한 데이터를 어떤 방법으로 전송할 지 지정하는 속성 - 길이 제한이 있어 대용량 데이터(파일 등)를 전송할 수 없다.
get - url뒤에 쿼리스트링 방식으로 값을 name과 value의 쌍으로 전송하는 방식 (기본값임) - 문자길이 제한있음 ex)https://www.a.b/index.jsp?id=admin&pw=1234 -->parameter(매개변수)
post - 본문(body)안에 (실제로는 header영역) 안에 데이터를 숨겨서 하는 방식 (get방식처럼 name과 value의 쌍으로 데이터를 전송하는 것은 동일) - 길이 제한이 없어 대용량 데이터를 전송할 수 있으며, 보안처리 되어야 하는 데이터를 전송할 때 사용한다.

submit	나(submit을 가지고 있는 태그)를 감싸고 있는 form태그의 action속성을 활성화한다. 실행시킨다. text- 한 줄 문자열을 입력할 수 있는 input에서 [Enter]시 submit 되버림
target	데이터를 전송받을 페이지를 보여줄 때 창을 구분하는 방식을 기술 _self : 기본값(default), 현재 창에서 보여주기 _blank : 새창(새탭)에서 보여주기
autocomlpete	- 기존에 입력한 데이터의 이력이 존재하면 동일한 name을 가진 속성에 데이터를 입력할 때 아래에 도움말 기능처럼 제공해주는 기능 - 기본값 : on
<label>	- 인라인레벨 요소의 머리말이나 꼬리말을 담당하는 태그 - 선택하는 영역이 작은 인라인 레벨 요소를 위한 클릭 영역을 넓혀주는 역할
<form> <input name="test"> 기본타입 text가 숨어있다. type="text" <input type="submit"> 기본값: 제출값이 숨어있다. <button>버튼</button> 기본타입 : type="submit"가 숨어있다. <button type="submit">버튼<button> </form> <button>버튼</button> 기본타입 :type="button"이 숨어있다.



<label for="이름"> <input id="이름"> "이름"을 동일하게 기술시 브라우저에서 선택범위를 확장해준다.
입력요소 머릿말 <label for="이름">First name : </label> <input type="text" id="firstname" name="first1" value="홍"> 입력요소 꼬릿말 <label>Last name : <input type="test" name="last" value="길동"></label>
<input type="submit" value="가입하기"> <button type="submit">가입하기</button>	submit <button> <form> 이내에 기술 시 default값은 한국은 "제출" / 외국은 "summit" <form> 외부시 단순 버튼 모양

<form action="19form01.html" method="GET">
            <label for="firstname">First name : </label>
            <input type="text" id="firstname" name="first1" value="홍">
            <br><br>
            <label>Last name : <input type="test" name="last" value="길동"></label>
            <br><br>
            <label for="job">Job : </label>
            <input type="text" id="job" value="학생"><br><br>

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

value값 미지정시 option값 전송됨.

form에 value값을 사전에 기술하였더라도 직접 기술하는 방식의 값이 우선시됨.

쿼리스트링방식(QueryString)이란?

: url뒤에 ?name명=value값&name명=값 (name과 value의 쌍으로)
형식으로 데이터를 전송하는 방식

<optgroup>
<option>
seleted - default값 지정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      form {
        border: 1px solid #000000;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <form>
      <!-- seleted, size속성 -->
      <label for="fruits">과일 선택:</label>
      <select id="fruits" name="fruits">
        <option value="">선택안함</option>
        <option>Apple</option>
        <option value="Water Melon">수박</option>
        <option value="Orange">오렌지</option>
        <option value="lemon" selected>레몬</option>
      </select>
      <br><br>

      <label for="colors">색상 선택:</label>
      <select id="colors" name="colors" size="4" multiple>
        <option value="red">빨강</option>
        <option value="green">녹색</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
      </select>
      <br><br>

      <label for="cars">차종 선택:</label>
      <select id="cars" name="cars">
        <optgroup label="Swedish Cars">
            <option value="volvo">볼보</option>
            <option value="saab">사브</option>
        </optgroup>
        <optgroup label="German Cars">
            <option value="mercedes">메르세데스</option>
            <option value="audi">아우디</option>
        </optgroup>
        </selelct>
        <input type="submit" value="전송">
    </form>
  </body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>form요소</title>
</head>
<body>
    <h2>The datalist Element</h2>
    <p>datalist 엘리먼트는 입력양식 옵션을 미리 정의하여 보여주는 태그입니다.</p>
    <form action="form.html">
        <input list="browsers" name="browser">
        <datalist id="browsers">
            <option>Internet Explorer</option>
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>
        <input type="submit">
    </form>
    <p>
        <b>참고:</b>
        datalist 태그는 Safari 12.1. 전 버전에서는 지원이 되지 않습니다.
    </p>
</body>
</html>

<fieldset>
- form태그 안에 입력요소들의 그룹을 변경할 때 사용하는 태그 - 블럭레벨이면서 천성이 있음. padding border

<fieldset> - form태그 안에 입력요소들의 그룹을 변경할 때 사용하는 태그
블럭레벨이면서 천성이 있음.
- padding
- border

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>웹폼</title>
  </head>
  <body>
    <form method="GET">
        <fieldset>
            <label>아이디 :
                <input type="text" name="user_id">
            </label>
            <label>비밀번호 :
                <input type="password" name="user_pw" size="10">
            </label>
            <input type="submit" value="로그인">
        </fieldset>
    </form>
  </body>
</html>

<legend> 임대영역 100% , <fieldset> top border 중간에 걸쳐서 텍스트로 표현됨

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹폼</title>
    <style>
        ul{list-style:none} /*마커만 제거*/
        li{margin:10px;}
    </style>
</head>
<body>
    <h1>회원가입</h1>
    <form>
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>
                    <label for="user-id">아이디</label>
                    <input type="text" id="user-id" name="user-id">
                </li>
                <li>
                    <label for="pwd1">비밀번호</label>
                    <input type="password" id="pwd1" name="pwd1">
                </li>
                <li>
                    <label for="pwd2">비밀번호 확인</label>
                    <input type="password" id="pwd2" name="pwd2" >
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>개인정보</legend>
            <ul>
                <li>
                    <label for="user-name">이름</label>
                    <input type="text" id="user-name" name="user-name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="email" id="mail" name="mail">
                </li>
                <li>
                    <label for="phone">연락처</label>
                    <input type="tel" id="phone" name="phone">
                </li>
                <li>
                    <label for="homep">블로그/홈페이지</label>
                    <input type="url" id="homep" name="homep">
                </li>
            </ul>
        </fieldset>

        <input type="submit" value="가입하기">
    </form>
</body>
</html>

728x90

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

'[HTML]' 카테고리의 다른 글

[HTML] <input 속성 - readonly, autofocus, required, placeholder, disabled, checked> (0)	2024.02.16
[HTML] <input type=" "> (0)	2024.02.16
[HTML] id, #, anchor, svg (0)	2024.02.15
[HTML] a tag, href, bookmark (0)	2024.02.14
[HTML] table Element, colgroup (0)	2024.02.14

allrouvel