주니어 기초 코딩공부/CSS, HTML 기초

HTML 정복하기!!! fieldset, legend, lable, option 예시 및 상세 설명

jju_developer 2023. 1. 4. 20:28
728x90

안녕하세요 JJU_DEVELOPER입니다.

지난 시간에 이어 html의 input 설멍에 조금 더 참고 할 수 있는 예제를 

가져왔습니다.

 

▼▼▼지난시간 참고▼▼▼

 

 

05장 HTML 입력 양식 작성하기 (폼삽입, input 태그 총정리)

안녕하세요 JJU_DEVELOPER입니다. 이번 시간에는 05장 입력 양식 작성하기에 대해 설명드리겠습니다. 목차 05-1 폼 삽입하기 05-2 사용자 입력을 위한 input 태그 05-3 input 태그의 주요 속성 05-4 폼에서 사

jju240.tistory.com

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>구매페이지</title>
    <style>
      #container {
        width:700px;
        margin:10px auto;
      }
    </style>    
  </head>
  <body> 
    <div id="container">
      <h1> 전자기기 구매</h1>
      <form>

        <fieldset>
          <legend> 새로운 박스!</legend>
          <label for="c1">상품 선택</label>
          <select id="c1">
            <option> 아이폰 14 프로</option>
            <option> 에어맥스 </option>
            <option> 에어팟 프로</option>
          </select>
        </fieldset>

        <div id="buttons">
          <input type="submit" value="구매하기">
          <input type="reset" value="취소">
        </div>
      </form>
    </div>           
  </body>
</html>

<fieldset>
          <legend> 새로운 박스!</legend>
          <label for="c1">상품 선택</label>
          <select id="c1">
            <option> 아이폰 14 프로</option>
            <option> 에어맥스 </option>
            <option> 에어팟 프로</option>
          </select>
        </fieldset>

form 안에 filedset을 만들고 select안에 option을 만들어서 

박스 안의 옵션으로 드롭다운을 할 수 있게 만들수 있습니다.

 

그런데! 여기서 기본 값으로 첫번째 값인 아이폰14프로가 아닌

에어팟 프로로 나타내고 싶다 할때에는 selected를 붙어주기만 하면 됩니다.

 

  <select id="c1">
            <option> 아이폰 14 프로</option>
            <option> 에어맥스 </option>
            <option selected> 에어팟 프로</option>
          </select>
 

아무것도 선택하지 않았을때

기본 값으로 자동으로 에어팟 프로가 나옵니다!!

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>노트북 주문하기</title>
  <link rel="stylesheet" href="css/order2.css">
</head>
<body>
  <h1>노트북 주문하기</h1>
  <div id="container">
    <form>
      <fieldset>
        <legend>상품 선택</legend>
        <p><b>주문할 상품을 선택해 주세요.</b></p>
        <ul id="product">
          <li>
            <label><input type="checkbox" value="s_3">에어맥</label>
            <input type="number" min="0" max="5">개 <small>(최대 5개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="s_5">맥북</label>
            <input type="number" min="0" max="3" value="1">개 <small>(최대 3개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="f_3">그램</label>
            <input type="number" min="0" max="5">개 <small>(최대 5개)</small>
          </li>
          <li>
            <label><input type="checkbox" value="f_5">asus</label>
            <input type="number" min="0" max="3">개 <small>(최대 3개)</small>
          </li>
        </ul>      
        <p><b>포장 선택</b></p>
        <ul>
          <li><label><input type="radio" value="yes">선물 포장</label></li>
          <li><label><input type="radio" value="no">선물 포장 안 함</label></li>
        </ul>    
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
        <ul id="shipping">
          <li>
            <label for="user-name">이름 </label>
            <input type="text" id="user-name">
          </li>
          <li>
            <label for="addr">배송 주소</label>
            <input type="text" id="addr">
          </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="d-day">배송 지정</label>
            <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
          </li>     
          <li>
            <label for="memo">메모</label>
            <textarea id="memo" cols="40" rows="4"></textarea>
          </li>   
        </ul>  
      </fieldset>
      <div>
        <button type="submit">주문하기</button>
        <button type="reset">취소하기</button>
      </div>        
    </form>
  </div>
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>연습문제 2</title>
	<style>
		#container {
			width: 520px;
			border: 1px solid rgba(245, 2, 204, 0.952);
			padding: 20px 40px;
			/* 패딩= 여백 */
			margin: 0 auto;
		}

		fieldset {
			margin-bottom: 15px;
		}

		legend {
			font-weight: bold;
		}

		ul {
			list-style-type: none;
		}

		/* ul 앞에 점 붙는거 없애줍니다. */

		li {
			line-height: 30px;
		}
	</style>
</head>

<body>
	<div id="container">
		<h1>프런트엔드 개발자 지원서 </h1>
		<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
		<hr>
		<form>
			<h4>개인정보</h4>
			<ul>
				<li>
					<label for="sname">이름</label>
					<input type="text" id="sname" placeholder="공백 없이 입력하세요">
				</li>

				<li>
					<label for="r-phone">연락처</label>
					<input type="tel" id="r-phone">
				</li>
			</ul>

			<h4>지원분야</h4>
			<ul>
				<li>
					<input type="radio" name="field">
					<label>웹퍼블리싱</label>
				</li>

				<li>
					<input type="radio" name="field" value="app">
					<label for="app">웹 어플리케이션 개발</label>
				</li>

				<li>
					<input type="radio" name="field" value="env">
					<label for="env">개발 개선 환경</label>
				</li>
			</ul>

			<h4>지원동기</h4>

			<textarea id="motive" cols="60" rows="5" placeholder="지원동기를 간략히 써 주세용"></textarea>

			<div>
				<input type="submit" value="접수하기">
				<button> 다시쓰기</button>
				<!-- 버튼은 인풋이나 버튼 둘중 아무거나 선택! -->
			</div>
		</form>
	</div>
</body>

</html>

최대한 CSS 적용 없이 HTML로만 만들었기때문에

지원서가 삐뚤한 점 양해 부탁드립니다.

 

다음시간에 배울 CSS로 더욱 좋은 퀄리티로 만들어 볼 예정입니다~!!

 

 

감사합니다.

 

 

728x90

'주니어 기초 코딩공부 > CSS, HTML 기초' 카테고리의 다른 글

CSS 텍스트를 표현하는 다양한 스타일 (글꼴, 웹폰트,목록,표만들기)  (0) 2023.01.06
CSS 기본 설명 (스타일, 기본 선택자, 캐스케이팅이란??)  (0) 2023.01.06
HTML 정복하기!!! 입력 양식 작성하기 (폼삽입, input 태그 총정리)  (0) 2023.01.04
HTML 정복하기!!! HTML기초 다양한 내용 입력하기 (목록만들기, 표만들기, 이미지 삽입하기, 오디오, 비디오, 하이퍼링크 삽입)  (0) 2023.01.03
HTML 시작하기!!! HTML 기본, 시맨틱 태그 개념 타파!  (0) 2023.01.03

'주니어 기초 코딩공부/CSS, HTML 기초'의 다른글

  • 현재글HTML 정복하기!!! fieldset, legend, lable, option 예시 및 상세 설명

관련글

티스토리툴바