민팽로그

[HTML] form, fieldset , input 태그 본문

📚소소한 스터디

[HTML] form, fieldset , input 태그

민팽 2021. 9. 6. 22:39 
<!DOCTYPE html>
<html lang="ko">
<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>회원가입</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>회원정보</legend>
      <table>
        <tbody>
          <tr>
            <th>아이디</th>
            <td><input type="text"><input type="button" value="중복확인"></td>
          </tr>
          <tr>
            <th>비밀번호</th>
            <td><input type="text"></td>
          </tr>
          <tr>
            <th>관련정보</th>
            <td>일반 정보 관련정보..</td>
          </tr>
        </tbody>
      </table>
    </fieldset>

    <table>
      <tbody>
        <tr>
          <th>전화번호</th>
          <td><input type="text" placeholder="숫자만 입력하세요"></td>
        </tr>
        <tr>
          <th>전화번호</th>
          <td>
            <select>
              <option>010</option>
              <option>011</option>
              <option>016</option>
              <option>018</option>
            </select>
            -<input type="text">-<input type="text"></td>
        </tr>
        <tr>
          <th>
            <img src="../../../04/images/login.jpg" alt="login 이미지">
          </th>
          <td>로그인 이미지 보여주기</td>
        </tr>
        <tr>
          <th>number 연습</th>
          <td><input type="number"></td>
        </tr>
        <tr>
          <th>hidden 연습</th>
          <td><input type="hidden"></td>
        </tr>
        <tr>
          <th>search 연습</th>
          <td><input type="search"></td>
        </tr>
        <tr>
          <th>password 연습</th>
          <td><input type="password"></td>
        </tr>
        <tr>
          <th>tel 연습</th>
          <td><input type="tel"></td>
        </tr>
        <tr>
          <th>url 연습</th>
          <td><input type="url"></td>
        </tr>
        <tr>
          <th>radio 연습</th>
          <td>
            <input type="radio" name="test-radio" value="1">1
            <input type="radio" name="test-radio" value="2">2
            <input type="radio" name="test-radio" value="3">3
          </td>
        </tr>
        <tr>
          <th>checkbox 연습</th>
          <td>
            <input type="checkbox" name="c1" value="1">1
            <input type="checkbox" name="c2" value="2">2
            <input type="checkbox" name="c3" value="3">3
          </td>
        </tr>
        <tr>
          <th>date 연습</th>
          <td><input type="date"></td>
        </tr>
        <tr>
          <th>image 연습</th>
          <td><input type="text"><input type="image" src="../../../04/images/login.jpg"></td>
        </tr>
        <tr>
          <th>수정 불가</th>
          <td><input type="text" value="수정하지 마세요" readonly></td>
        </tr>
      </tbody>
    </table>

  </form>

  <select>
    <optgroup label="휴대전화">
      <option>010</option>
      <option>011</option>
      <option>016</option>
      <option>018</option>
    </optgroup>
   <optgroup label="지역번호">
    <option>02</option>
    <option>032</option>
    <option>054</option>
    <option>063</option>
   </optgroup>
    
  </select>
  
</body>
</html>

 

form 태그

- 사용자로부터 정보를 입력받고 서버로 보내기 위한 큰 틀을 만드는 데에 사용되는 태그

- input 태그를 사용하여 데이터를 입력받을 수 있음

- 주요 속성

name 폼 태그 식별을 위한 이름
action 폼 데이터들가 전송될 서버 url
method http 전송 방식(get, post)

 

fieldset 태그

- form에서 관련있는 요소들 끼리 묶기 위해 사용

- <legend> 태그를 통해 묶음의 이름을 표시할 수 있음

 

input 태그

- 사용자로부터 입력을 받을 수 있음

- 주요 속성

type 입력 타입을 나타내며 number, hidden, search, radio, checkbox, text, date 등이 있음
name input 태그를 구분하기 위한 이름으로 예를들어 type이 radio일 때 같은 name 값을 사용하면 같은 name에 속하는 것들 중 하나만 선택할 수 있게 됨. 글 맨 위 예제코드 참고
value input의 값 지정
placeholder input에 관한 안내문구, 설명 등을 표시해 줄 수 있음.

 

 

'📚소소한 스터디' 카테고리의 다른 글

연구과제 참고 목록  (0) 2021.10.01
웹의 인증 및 인가/쿠키와 세션  (0) 2021.09.12
URI와 URL  (0) 2021.09.05
자주 사용하는 리눅스 명령어  (0) 2021.08.24
OAuth, 구글 로그인 이해에 참고했던 포스팅 모음  (0) 2021.08.23
'📚소소한 스터디' Related Articles more
Comments