[E-HTML] input, select, textarea, lable 예시 + 연습문제

728x90

입력양식 종류들

<!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>
    <!-- input : 입력양식 -->
    <!-- <input type ="형태" name="변수명" value="화면에 보여질값" /> -->
    <!-- type ="text" : 글자입력 -->
    <input type="text" name="name" value="" />
    <!-- <br/> : 줄바꿈(추천 -> 리액트 br 에러) -->
    <!-- 줄삭제 : ctrl + y -->
    <br />
    <!-- 패스워드 입력양식 -->
    <input type="password" name="password" value="" />
    <br />
    <!-- 체크박스 입력양식 -->
    <input type="checkbox" name="checkbox" value="checkbox" />좋음
    <input type="checkbox" name="checkbox" value="checkbox" />나쁨
    <br />
    <!-- 라디오 입력양식 -->
    <!-- 참고) name의 값이 2개가 일치해야 정상적으로 동작 -->
    <input type="radio" name="people" value="radio" />여
    <input type="radio" name="people" value="radio" />남
    <br />
    <!-- file 대화상자 입력방식 -->
    <input type="file" name="file" value="file" />
    <br />
    <!-- 히든 입력방식 : 특수용도(화면에는 안보이지만 html문서에 값을 가지고 있음) -->
    <input type="hidden" name="hidden" value="홍길동" />
    <br />
    <!-- 입력방식 : 버튼 -->
    <input type="button" name="" value="홍길동" />
    <!-- 화면에 입력된 text를 지우는 기능 -->
    <input type="reset" name="" value="홍길동" />
    <!-- 다른 웹페이지(html페이지)로 이동하는 기능 -->
    <input type="submit" name="" value="홍길동" />
    <br />
  </body>
</html>

Document

좋음 나쁨
여 남

select 입력양식1

<!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>
    <!-- select 입력양식 : 여러개의 목록이 있는 태그 -->
    <!-- selected 속성 : 미리 선택된 값을 지정하는 속성 -->
    <select>
      <option value="a">김밥</option>
      <option value="b" selected>떡볶이</option>
      <option value="c">순대</option>
      <option value="d">어묵</option>
    </select>
  </body>
</html>

Document

select 입력양식2

<!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>
    <select>
      <!-- <optgroup> 태그 : 목록에 그룹명을 부여해서 화면에 표시함 -->
      <!-- front 기술 -->
      <optgroup></optgroup>
      <optgroup label="HTML5">
        <option>html</option>
        <option>css</option>
        <option>javascript</option>
      </optgroup>

      <!-- backend 기술 -->
      <optgroup></optgroup>
      <optgroup label="backend">
        <option>java</option>
        <option>springboot</option>
      </optgroup>
    </select>
  </body>
</html>

Document

select 입력양식3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- multiple="multiple" 속성 : 여러개 선택(ctrl키, shift 키를 이용) -->
    <select multiple="multiple">
      <option>김밥</option>
      <option>떡볶이</option>
      <option>순대</option>
      <option>어묵</option>
    </select>
  </body>
</html>

Document

textarea : 글쓰기 입력양식

<!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>
    <h4>글쓰기</h4>
    <!-- textarea : 글쓰기 입력양식 -->
    <!-- 속성 clos : 가로 크기 -->
    <!-- 속성 rows : 세로 크기 -->
    <textarea cols="30" rows="15"></textarea>
  </body>
</html>

Document

글쓰기

라벨 태그

<!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>
    <!-- 라벨 태그 : 입력양식 앞에 제목(설명) 등으로 사용되는 태그 -->
    <label for= >"이름"</label> 
    <input type="text" />
    <br />
    성별<input type="radio" name="gender" />
    <label for=>"남자"</label>
    <input type="radio" name="gender" />
    <label for=>"여자"</label>
    <br />
    <input type="button" name="" value="가입" />
  </body>
</html>

Document "이름"
성별 "남자" "여자"

<!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(부모태그, 생략가능) > 입력양식(자식태그) -->
    <form>
      <!-- 1) -->
      <label for="">이름</label>
      <input type="text" />
      <br />
      <!-- 2) -->
      <!-- 입력양식 : name, id, class, width, height 등 공통속성(모든태그에 있음) -->
      <!-- for="변수값" == id="변수명" : label 태그와 input 태그가 연결 -->
      <label for="name">이름</label>
      <input type="text" id="name" />
    </form>
  </body>
</html>

Document

연습문제1

문제

Document

이름
성별	남자 여자

문제와 동일할 수 있게 코드 짜보기

<!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>
    <table border="1">
      <thead>
        <!-- 1행 -->
        <tr>
          <!-- 1열 -->
          <th>이름</th>
          <!-- 2열 -->
          <td><input type="text" /></td>
        </tr>
      </thead>
      <!-- 제목끝 -->
      <!-- 본문 시작 -->
      <!-- 2행 -->
      <tr>
        <!-- 1행 -->
        <th>성별</th>
        <!-- 2행 -->
        <td>
          <input type="radio" value="gender" /> 남자
          <input type="radio" value="gender" /> 여자
        </td>
      </tr>
    </table>
    <input type="button" value="가입" />
  </body>
</html>

연습문제2

문제

Document

1. <h1> ~ <h6> 태그 중 가장 글자 크기가 큰것은 무엇인가요?

정답 : <h1> ~ <h6>

2. 삶에서 가장 중요한것은 "행복" 일까요? 아니면 "사랑" 일까요?

정답 : 둘 다 ...

중요하지 않을까요?

문제와 동일할 수 있게 코드 짜보기

<!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>
    <!-- html 특수 태그들 -->
    <!-- < : &lt;(less than) -->
    <!-- > : &gt;(greater than) -->
    <!-- 공백 : &nbsp; -->
    <h3>
      1. &lt;h1&gt; ~ &lt;h6&gt; 태그 중 가장 글자 크기가 큰것은 무엇인가요?
    </h3>
    <p>정답 : &lt;h1&gt; ~ &lt;h6&gt;</p>

    <h3>2. 삶에서 가장 중요한것은 "행복" 일까요? 아니면 "사랑" 일까요?</h3>
    <!-- html 특징 : 공백 여러개 입력해도 1개로 인식됨 -->
    <p>정답 : <b>둘 다</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</p>
    <br />
    <br />
    중요하지 않을까요?
  </body>
</html>

연습문제3

문제

Document

간단한 로제 파스타 만들기

토마토 소스의 새콤 달콤함과 크림소스의 부드럽고 고소함

새우, 마늘, 양파
끓는 물에 스파게티 면
볶아놓은 재료와 스파게티 면

😂😊※스파게티 면은 라면이나...

문제와 동일할 수 있게 코드 짜보기

<!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>
    <h3>
      <b>간단한 로제 파스타 만들기</b>
    </h3>
    <p>토마토 소스의 <b>새콤 달콤함</b>과 크림소스의 <b>부드럽고 고소함</b></p>
    <ol>
      <li>새우, 마늘, 양파</li>
      <li>끓는 물에 스파게티 면</li>
      <li>볶아놓은 재료와 스파게티 면</li>
    </ol>
    <p>😂😊※스파게티 면은 라면이나...</p>
  </body>
</html>

연습문제4

<!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>
    <h3>
        <b>반려동물이란?</b>
    </h3>
    <p>사람과 더불어 살아가는 동물이란...</p>
    <img src="image/bird.jpg" alt="새" width="300"></img>  
    <br>
    <img src="image/jam.jpg" alt="잠자리" width="300"></img>
</body>
</html>

연습문제5

<!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>
        <!-- 이미지에 링크 걸기 -->
        <h2>이미지에 링크 걸기</h2>
        네이버 <br>
        <a href="http://naver.com">
        <img src="image/bird.jpg" alt="새" width="300"></img>  
    </a>
        <br>
        구글 <br>
        <a href="http://google.com">
        <img src="image/jam.jpg" alt="잠자리" width="300"></img>
    </a>
</body>
</html>

연습문제6

문제

Document

첫번째 목록	디자인
	Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor _{sit amet}
두번째 목록	디자인 시작
	Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor _{sit amet}
세번째 목록	디자인 끝

문제와 동일할 수 있게 코드 짜보기

<!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>
    <!-- 1) 테이블 -->
    <table border="1">
      <thead>
        <!-- 1행 -->
        <tr>
          <!-- 1열 -->
          <th>첫번째 목록</th>
          <!-- 2열 -->
          <td>디자인</td>
        </tr>
      </thead>
      <!-- 제목끝 -->
      <!-- 본문 시작 -->
      <!-- 2행 -->
      <tr>
        <!-- 1행 -->
        <th></th>
        <!-- 2행 -->
        <td>
          <!-- 순서없는 목록 -->
          <ul>
            <li><b>Lorem ipsum dolor sit amet</b></li>
            <li><i>Lorem ipsum dolor sit amet</i></li>
            <li><small>Lorem ipsum dolor sit amet</small></li>
            <li>Lorem ipsum dolor <sub>sit amet</sub></li>
          </ul>
        </td>
      </tr>
      <!-- 3행 -->
      <tr>
        <!-- 1행 -->
        <th>두번째 목록</th>
        <!-- 2행 -->
        <td>디자인 시작</td>
      </tr>
      <!-- 4행 -->
      <tr>
        <!-- 1행 -->
        <th></th>
        <!-- 2행 -->
        <td>
          <!-- 순서 있는 목록 -->
          <ol>
            <li><b>Lorem ipsum dolor sit amet</b></li>
            <li><i>Lorem ipsum dolor sit amet</i></li>
            <li><small>Lorem ipsum dolor sit amet</small></li>
            <li>Lorem ipsum dolor <sub>sit amet</sub></li>
          </ol>
        </td>
      </tr>
      <!-- 5행 -->
      <tr>
        <!-- 1행 -->
        <th>세번째 목록</th>
        <!-- 2행 -->
        <td>디자인 끝</td>
      </tr>
      <!-- 본문 끝 -->
    </table>
  </body>
</html>

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] 선택자 예시 (15)	2023.08.04
[E-HTML&CSS] 연습문제 + div, span, 시멘틱태그 예시, css 기본선택자 (16)	2023.08.03
[E-HTML] text, list, table, audio, video, image 예시 (15)	2023.08.01
[E-Java] 접근 제어자 예시 (20)	2023.08.01
[E-Java] 생성자 사용 예시 (16)	2023.07.31

송기동의 개발 블로그

[E-HTML] input, select, textarea, lable 예시 + 연습문제

입력양식 종류들

select 입력양식1

select 입력양식2

select 입력양식3

textarea : 글쓰기 입력양식

글쓰기

라벨 태그

연습문제1

연습문제2

1. <h1> ~ <h6> 태그 중 가장 글자 크기가 큰것은 무엇인가요?

2. 삶에서 가장 중요한것은 "행복" 일까요? 아니면 "사랑" 일까요?

연습문제3

간단한 로제 파스타 만들기

연습문제4

연습문제5

연습문제6

'Example' 카테고리의 다른 글

티스토리툴바

[E-HTML] input, select, textarea, lable 예시 + 연습문제

입력양식 종류들

select 입력양식1

select 입력양식2

select 입력양식3

textarea : 글쓰기 입력양식

글쓰기

라벨 태그

연습문제1

연습문제2

1. <h1> ~ <h6> 태그 중 가장 글자 크기가 큰것은 무엇인가요?

2. 삶에서 가장 중요한것은 "행복" 일까요? 아니면 "사랑" 일까요?

연습문제3

간단한 로제 파스타 만들기

연습문제4

연습문제5

연습문제6

'Example' 카테고리의 다른 글

관련글

티스토리툴바