웹프로그래밍 HTML/입력양식과 공간 분할 태그

입력 양식 태그

별초롱언니 2025. 3. 6. 10:20

▣ 제출 양식

· 입력 데이터를 처리하기 위한 버튼 정의
· 폼 태그의 action 속성에 지정된 파일로 값 전송

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>제출 양식 만들기</title>
</head>

<body>
  <h2>입력 양식 데이터 전송 버튼</h2>

  <form action="#" method="get">
    <p>이름 : <input type="text" id="user"></p>
    <p>학과 : <input type="text" id="major"></p>
    <input type="submit" value="전송">
  </form>
  
</body>

</html>


▣ 초기화 양식

· 폼에 입력한 데이터 모두 초기화

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>초기화 양식 만들기</title>
</head>

<body>
  <h2>입력 데이터 초기화 버튼</h2>
  
  <form action="#" method="get">
    <p>이름 : <input type="text" id="user"></p>
    <p>학과 : <input type="text" id="major"></p>

    <input type="submit" value="전송">
    <input type="reset" value="다시 작성">
  </form>

</body>
</html>


▣ 텍스트 입력 양식

· 기본적인 텍스트를 입력할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 입력 양식 만들기</title>
</head>
<body>
  <h2>문자 입력 양식</h2>
  <form>
    <p>
      <label for="username">이름 : </label>
      <input type="text" name="user" id="username" size="10">
    </p>
    
    <p>학번 : <input type="text" name="studentnum" size="10"></p>
    <p>학과 : <input type="text" name="major" value="컴퓨터과학과"></p>

    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>

 


▣ 비밀번호 입력 양식

· 사용자가 입력한 문자를 보이지 않게 '● ' 으로 처리

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>비밀번호 입력 양식 만들기</title>
</head>
<body>
  <!-- placeholder : 문자나 이미지 등이 들어갈 자리에 임시로 채워 놓는 내용물을 의미 -->
  <!-- required : 필수입력값 -->
  <h2>회원 인증 입력 양식</h2>
  <form>
    <p>ID : <input type="text" id="user" size="15" required></p>
    <p>PW : <input type="password" id="pw" size="15" placeholder="비밀번호" required></p>

    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>


▣ 텍스트 공간 입력 양식

· 텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>텍스트 공간 입력 양식 만들기</title>
</head>
<body>
  <h2>텍스트 공간 입력 양식</h2>
  <form>
    <textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.</textarea>
    <p></p>
    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>


▣ <fieldset> 태그

· 입력 폼이 여러 개 있을때, 경계선을 그려서 하나의 그룹으로 만들 때 사용 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>입력 폼 그룹으로 묶기</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>개인 정보 입력</legend>
      <p>이름 : <input type="text" id="name"></p>
      <p>학교 : <input type="text" id="school"></p>
      <input type="submit" value="제출">
      <input type="reset" value="다시작성">
    </fieldset>
  </form>
</body>
</html>

 


▣ 라디오 입력 양식

· 여러 항목 중 하나만 선택할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>라디오 양식 만들기</title>
</head>
<body>
  <form>

    <h3>당신의 성별은 무엇입니까?</h3>
    <input type="radio" name="gender" value="male">남자
    <input type="radio" name="gender" value="female" checked>여자
    
    <p></p>

    <h3>당신은 몇 학년 입니까?</h3>
    <input type="radio" name="year" value="1" checked>1학년
    <input type="radio" name="year" value="2">2학년
    <input type="radio" name="year" value="3">3학년
    <input type="radio" name="year" value="4">4학년

    <p></p>

    <input type="submit" value="제출">
    <input type="reset" value="다시작성">

  </form>
</body>
</html>


▣ 체크박스 양식

· 동시에 여러 항목을 선택할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>체크박스 양식 만들기</title>
</head>
<body>
  <form>

    <h3>현재 관심을 가지고 있는 학습 주제는 무엇입니까?</h3>

    <input type="checkbox" name="subject" value="HTML5">HTML5 <br>
    <input type="checkbox" name="subject" value="CSS3">CSS3 <br>
    <input type="checkbox" name="subject" value="Javascript">Javascript<br>
    <input type="checkbox" name="subject" value="Jquery">Jquery

    <p></p>

    <input type="submit" value="제출">
    <input type="reset" value="다시작성">

  </form>
</body>
</html>


▣ 버튼 양식

· <button> 태그 혹은 <input> 태그를 사용하여 정의

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼 양식 만들기</title>
</head>
<body>
  <form>
    <h3>Button 태그 사용</h3>
    <button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>

    <h3>Input 태그 사용</h3>
    <input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">

    <h3>Image 버튼 사용</h3>
    <button type="button" onclick="alert('클릭-3 사용')"><img src="../dog1.jpg" width="150" height="200"></button>
  </form>
</body>
</html>


▣ 선택 목록

· 펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 양식

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>선택 목록 양식 만들기</title>
</head>
<body>
  <h3>관심 있는 학습 주제 한 가지를 선택하세요.</h3>
  <form>
    <select name="subjects">
      <option value="" disabled selected>선택하세요</option>
      <option value="1">HTML5</option>
      <option value="2">CSS3</option>
      <option value="3">Javascript</option>
      <option value="4">Jquery</option>
    </select>
    <p></p>

    <input type="submit" value="제출">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>


▣ 다중 선택

· Multiple 속성 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>선택 목록 양식 만들기</title>
</head>
<body>
  <h3>관심 있는 학습 주제 모두 선택하세요.</h3>
  <form>
    <select name="subjects" size="4" multiple>
      <option value="1"selected>HTML5</option>
      <option value="2">CSS3</option>
      <option value="3">Javascript</option>
      <option value="4">Jquery</option>
    </select>

    <p></p>

    <input type="submit" value="제출">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>


▣ <optgroup>태그

· 여러 항목을 그룹으로 묶을 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>선택 목록 양식 만들기</title>
</head>
<body>
  <h3>그룹별 선택 항목을 제공합니다.</h3>
  <form>
    <label>전공분야를 선택하세요.

      <select name="major">
        <optgroup label="computer">
          <option>Software</option>
          <option>Robot</option>
          <option>System</option>
        </optgroup>

        <optgroup label="language">
          <option selected>Korea</option>
          <option>English</option>
          <option>Gemany</option>
        </optgroup>

        <optgroup label="business">
          <option>Service</option>
          <option>Education</option>
          <option>Communication</option>
          <option>Marketing</option>
        </optgroup>
      </select>
      
      <p></p>

      <input type="submit" value="선택">
      <input type="reset" value="다시선택">
  </label>
  </form>
</body>
</html>


▣ <datalist>태그

· 텍스트 입력 시 자동완성 기능 제공

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>선택 목록 양식 만들기</title>
</head>
<body>
  <h3>선택사항을 직접 입력하세요.</h3>
  <form>
    <label>전공 분야를 입력하세요
      <input type="text" list="majorlist" name="name">
      <datalist id="majorlist">
        <option value="Software">소프트웨어</option>
        <option value="Robot">로봇</option>
        <option value="System">시스템</option>
        <option value="Service">서비스</option>
        <option value="Education">교육</option>
      </datalist>
      
      <p></p>

      <input type="submit" value="완료">
      <input type="reset" value="다시작성">
    </label>
  </form>
</body>
</html>


▣ <input type="date"> 입력 폼 
· 년-월-일 단위로 원하는 날짜 입력할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>날짜/시간 양식 만들기</title>
</head>
<body>

  <form>
    <h3>오늘 날짜 입력</h3>
    Today : <input type="date" name="Today">

    <h3>프로젝트 수행기간</h3>
    From : <input type="date" name="from" min="2025-01-01" max="2025-08-31">
    To : <input type="date" name="to" min="2025-01-01" max="2025-08-31">
    
    <p></p>
    
    <input type="submit" value="제출">
    <input type="reset" value=" 다시작성">
  </form>
  
</body>
</html>


▣ type 속성값· month : 년-월 단위로 날짜 입력· week : 년-주 단위로 날짜 입력

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>날짜/시간 양식 만들기</title>
</head>
<body>
  
  <form>
    <h3>생일(년/월) 입력</h3>
    생일 : <input type="month" name="birth">

    <h3>주간 계획(년/주) 입력</h3>
    주간 계획 : <input type="week" name="weekend">
    <p></p>

    <input type="submit" value="제출">
    <input type="reset" value="다시작성">
  </form>

</body>
</html>


▣ type 속성값

· time : 시간만 입력

· datetime : 년-월-일-시간 단위로 입력

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    <h3>현재 시간 입력</h3>
    Time : <input type="time" name="Now">

    <h3>생일(년도, 월, 일, 시간) 입력</h3>
    Birthday : <input type="datetime-local" name="birthdaytime">
    
    <p></p>
    
    <input type="submit" value="제출">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>


▣ <input type="color" 입력 폼

· 색상 칩에서 원하는 색상을 선택할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    <h3>원하는 색상을 선택하세요</h3>
    <input type="color" name="color" value="#000ff">
    
    <p></p>

    <input type="submit" value="선택완료">
    <input type="reset" value="다시선택">
  </form>
</body>
</html>


▣ <input type="number"> 

· 숫자를 입력할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>숫자 입력 양식 만들기</title>
</head>
<body>
  <form>
    <h3>나이를 입력하세요.</h3>
    <input type="number" name="age" min="1" max="150">
    <p></p>
    <input type="submit" value="완료">
    <input type="reset" value="초기화">
  </form>
</body>
</html>


▣ <input type="range" 입력 폼
· 특정 범위의 숫자를 선택할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>범위 지정 양식 만들기</title>
</head>
<body>
  <form>
    <h3>0~100 범위에서 원하는 지점을 선택하세요.</h3>
    <input type="range" name="point" min="0" max="100">
    <p></p>
    <input type="submit">
    <input type="reset">
  </form>
</body>
</html>

 


▣ 이메일 입력 양식
· 텍스트 상자와 외형은 같지만 이메일 형식에 맞게 정확하게 작성하지 않으면 경고 메시지가 나타남

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이메일 입력 양식 만들기</title>
</head>
<body>
  <form>
    <h3>이메일을 정확하게 입력하세요<h3>
      이메일 : <input type="email" name="myemail">
      <p></p>

      <input type="submit">
      <input type="reset">
  </form>
</body>
</html>

 


▣ URL 입력 양식
· 입력한 URL이 http://로 시작하지 않는 등 형식에 맞지 않는다면 새로 입력하라는 메세지가 나타남 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL 입력 양식 만들기</title>
</head>
<body>
  <form action="">
    <h3>홈페이지 주소를 입력하세요.</h3>
    홈페이지 : <input type="url" name="myhome">
    <p></p>

    <input type="submit">
    <input type="reset">
  </form>
</body>
</html>

 


▣ 검색 양식
· 검색어를 입력할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>검색어 입력 양식 만들기</title>
</head>
<body>
  <h3>검색어를 입력하세요.</h3>
  구글 검색 : <input type="search" name="googlesearch">
  
  <p></p>

  <input type="submit">
  <input type="reset">
</body>
</html>


▣ <meter> 태그
· 지정된 값을 표현하기 위해 사용
 
▣ <progress> 태그
· 다운로드 상태 표시 같이 현재 진행율이 어떻게 되고 있는지를 나타낼 때 사용 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>막대 그래프 양식 만들기</title>
</head>
<body>
  <form>
    <h3>학습량 그래프</h3>
    별이 : <meter min="0" max="100" optimum="50" value="70"></meter>  70 out 100<br>
    초롱 : <meter low="0.3" high="0.5" value="0.8"></meter> 80%<br>
    언니 : <meter low="0.25" high="0.75" optimum="0.8" value="0.2"></meter> 20%

    <br><br><br>

    <h3>작업 진행율</h3>
    초기 작업 : <progress value="22" max="100" title="진행율"></progress> 22%<br>
    중간 작업 : <progress value="0.77" max="1"></progress>  77%<br>
    다음 작업 : <progress value="0.98" max="1" ></progress> 98%
  </form>
</body>
</html>


▣ 읽기 전용 속성 : readonly
· 텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정
 
▣ 비활성화 속성 : disabled 
· 텍스트 상자를 비활성화 시킴
 
▣ 자동 완성 속성 : autocomplete [ autocomplete = "on" ]
· 사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음
 
▣ 자동 포커스 속성 : autofocus
· 현재 페이지가 로드될 때 처음으로 입력하고자 하는 폼을 선택하는 속성 
 
▣ 플레이스 홀더 속성 : placeholder
· 현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성
 
▣ 필수 입력 속성 : required
· 반드시 데이터가 입력되어야 하는 폼을 지정하는 속성
 
▣ 오타 체크 속성 : spellcheck  [ spellcheck = "true" ]
· 입력되는 문장의 오타를 실시간으로 점검

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>공통 속성 사용하기</title>
</head>
<body>
  <h2>HTML5 입력 양식의 주요 속성을 연습해보자</h2>
  <form>
    <p>쓰기가능 : <input type="text" name="name" size="20" placeholder="이름을 입력하세요"></p>
    <p>읽기전용 : <input type="text" name="name" size="10" readonly></p>
    <p>사용안함 : <input type="text" name="name" size="10" disabled></p>
    <p>자동완성 : <input type="text" name="name" size="10" autocomplete="on"></p>
    <textarea rows="5" cols="30" spellcheck="true" placeholder="오타를 체크합니다"></textarea>
    <p></p>
    <input type="submit" value="전송">
    <input type="reset" value="다시작성">
  </form>
</body>
</html>

 

 

'웹프로그래밍 HTML > 입력양식과 공간 분할 태그' 카테고리의 다른 글

HTML 웹페이지 만들어보기  (0) 2025.03.10
TEST  (0) 2025.03.10
공간 분할 태그  (0) 2025.03.06
HTML5와 입력 양식 요소  (0) 2025.03.05