ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML] 폼 만들기 퀴즈
      IT/HTML 2022. 3. 10. 17:12
      728x90

      Do it! HTML+CSS+자바스크립트 웹 표준의 정석에 있는 퀴즈입니다.

       

       HTML은 엄청 기초라 그냥 지나갈 수 있을 줄 알았는데, 모르는 부분이 많았다.

      특히 챕터5의 입력 양식 작성하기 부분은 HTML을 이렇게 알차게 사용할 수 있구나를 배웠다.

       

      폼을 만드는 것인데,

      <form [속성="속성값"]>여러 폼 요소</form>

      의 기본형태 폼을 여러가지 태그를 사용하여 작성한다.

       

      다양한 input 태그의 type 활용도 의미있었다.

      text 부터 password, search, email submit 등등등...

      이런걸 다 외우진 않더라도 아 그런게 있었지?

      하고 바로 기억하고 써먹는게 중요할 것 같다.

       

      5장의 끝에 퀴즈 2개가 있는데 2번째 퀴즈가 도움됐다.

      위 사진과 같은 폼을 만드는 것이다.

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
            
            </form>

      기본적으로 이만큼만 적혀있는데,

      모르면 앞에 찾아보며 하면 금방 작성할 수 있다.

       

      정답 👀

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
			#container { 
				width:520px;
				border:1px solid black;
				padding:20px 40px;
				margin:0 auto;
			}
      fieldset { margin-bottom:15px; }
      legend { font-weight:bold; }
			ul {list-style-type: none;}
			li { line-height:30px;}
    </style>
  </head>
  <body>
		<div id="container">
			<h1>프런트엔드 개발자 지원서 </h1>
			<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
			<hr>
			<form>
				<h4>개인정보</h4>
				<ul>
					 <li>
						 <!-- <input>태그 앞 뒤에 <label>과 </label> 태그로 묶어도 됩니다 -->
							<label for="sname"> 이름 </label>
							<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
					</li>
					<li>
							<label for="snumber"> 연락처 </label>
							<input type="text" id="snum">
					 </li>
				</ul>
				<h4>지원 분야</h4>
				<ul>
					<li>
						<label><input type="radio" name="field" value="an"> 웹 퍼블리싱</label>
					</li>
					<li>
						<label><input type="radio" name="field" value="pd"> 웹 애플리케이션 개발</label>
					</li>
					<li>
						<label><input type="radio" name="field" value="eng"> 개발 환경 개선</label>
					</li>
				</ul>
        <label>
          <h4>지원동기</h4>
          <textarea id="motive" cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
        </label>
				<div>
					<input type="submit" value="접수하기">
					<input type="reset" value="다시 쓰기">
					<!-- 다음과 같이 작성해도 됩니다.
						<button type="submit">접수하기</boutton>
						<button type="reset">다시 쓰기</button>
					-->
				</div>
			</form>
		</div>
  </body>
</html>

      많이 쓰겠다~ 싶은 유용한 input 태그의 type 속성들, placeholder, autofocus도 보이고

      메모를 적을 수 있는 textarea도 알아보았다.

       

      끄읏

      댓글

    티스토리툴바