728x90

728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] detail / summary  (0) 2024.03.25
[HTML5] 박스, 리스트, 버튼 활용 예시  (0) 2024.03.25
[HTML5] 체크박스/라디오박스/콤보박스  (0) 2024.03.25
[HTML5] 시멘트 태그  (0) 2024.03.25
[HTML5] form  (0) 2024.03.24
728x90

<!DOCTYPE html>
<body>
    <details>
        <summary>질문 1</summary>
        <p>프로그래밍 언어?</p>
    </details>
    <details>
        <summary>답1</summary>
        <p>Java</p>
    </details>
</body>
</html>
728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] 스핀버튼 / 슬라이드 바  (0) 2024.03.25
[HTML5] 박스, 리스트, 버튼 활용 예시  (0) 2024.03.25
[HTML5] 체크박스/라디오박스/콤보박스  (0) 2024.03.25
[HTML5] 시멘트 태그  (0) 2024.03.25
[HTML5] form  (0) 2024.03.24
728x90

레이블 없이

<!DOCTYPE html>

<body>
    <h1>프런트엔드 개발자 지원서</h1>

    HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.
    <hr>
    <h3>개인정보</h3>

    <ul>
        <li>이름 <input type="text"> </li>
        <li>연락처 <input type="tel"> </li>
    </ul>

    <h3>지원 분야</h3>

    <ul>
        <li><input type="radio"> 웹 퍼블리싱</li>
        <li><input type="radio"> 웹 애플리케이션 개발</li>
        <li><input type="radio"> 개발 환경 개선</li>

    </ul>

    <h3>지원동기</h3>
    <textarea rows="5" cols="80" placeholder="본사 지원 동기를 간략히 써 주세요.."></textarea><br>

    <input type="submit" value="접수하기">
    <input type="reset" value="다시 쓰기">

</body>
</html>

 

 

 

 

 

레이블 활용

<!DOCTYPE html>
<body> 
    <h1>회원 가입을 환영한다!</h1>
    <fieldset>
        <legend>사용자 정보</legend>
        <ul>
            <li>
                <label for ="id1">아이디</label>
                <input type="text" id="id1"
                placeholder="4자~10자 사이, 공백노노">
            </li>
            <li>
                <label for ="email1">이메일</label>
                <input type="email" id="email1">
            </li>
            <li>
            <label for ="pw1">비밀번호</label>
            <input type="password" id="pw1"
            placeholder="문자와 숫자, 특수 기호 포함">
            </li>
            <li>
            <label for ="pwc1">비밀번호확인</label>
                <input type="password" id="pwc1">
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>이벤트와 새로운 소식</legend>
        <input type="radio">메일 수신
        <input type="radio" checked>메일 수신 안 함
    </fieldset>
    <input type="submit" value="가입하기">
    <input type="reset" value="취소">
</body>
</html>
728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] 스핀버튼 / 슬라이드 바  (0) 2024.03.25
[HTML5] detail / summary  (0) 2024.03.25
[HTML5] 체크박스/라디오박스/콤보박스  (0) 2024.03.25
[HTML5] 시멘트 태그  (0) 2024.03.25
[HTML5] form  (0) 2024.03.24
728x90

버튼

<!DOCTYPE html>
<body>
    id : <input type="text">
    pw : <input type="password">
<input type="submit" value="전송"><br> <!-- 서버에 전송-->
<input type="reset" value="리셋"><br> 
<input type="button" value="버튼">
</body>
</html>

 

 

체크박스

<!DOCTYPE html>
<body>
    <form>
        탕수육<input type="checkbox" value="1">
        짬뽕<input type="checkbox" value="2" checked>
        크림새우<input type="checkbox" value="3">
        <input type="submit" value="전송"

    <!-- 서버에전송되는값은 value값이 전송된다 -->
    </form>
</body>
</html>

 

 

라디오박스

<!DOCTYPE html>
<body>
    <form>
        <input type="radio" name="a" value="1">탕수육<br>
        <input type="radio" name="a" value="2">짬뽕<br>
        <input type="radio" name="a" value="3">새우<br>
        <input type="submit" value="전송">
    </form>
    
</body>
</html>

 

 

 

예시)

 

콤보박스

<!DOCTYPE html>

<body>
    <form>
        <select name="food">
            <option value="1" selected>탕수육</option>
            <option value="2" selected>새우</option>
            <option value="3" selected>짬뽕</option>

        </select>
    </form>

</body>

</html>

 

 

 

콤보박스 활용 예시)

<!DOCTYPE html>

<body>
  <fieldset>
    <legend>상품 선택</legend>
    <h3>주문할 상품을 선택해 주세요.</h3>
    <form>
        <select name="주문 상품">
            <option value="1" selected>선물용 3kg</option>
            <option value="2" selected>선물용 5kg</option>
            <option value="3" selected>가정용 3kg</option>
            <option value="4" selected>가정용 5kg</option>

        </select>
    </form>
  </fieldset>

</body>

</html>

 

728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] detail / summary  (0) 2024.03.25
[HTML5] 박스, 리스트, 버튼 활용 예시  (0) 2024.03.25
[HTML5] 시멘트 태그  (0) 2024.03.25
[HTML5] form  (0) 2024.03.24
[HTML5] 셀 병합  (0) 2024.03.24
728x90

시멘트 태그

 

  • <header>, <section>, <article>, <footer>, <nav> 태그 위치와 색, 모양이 자동으로 결정되는 것이 아님
  • 개발자가 CSS3를 이용하여 직접 위치와 색, 모양을 지정해야 함

 

시멘트 태그 예시)

 

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

<br>
<p>내일 <mark>시험</mark></p>
시간<time>09:30</time><br>
제출 <meter value="0.9">90%</meter><br>
<progress value="2" max="10"></progress>

</body>
</html>
728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] 박스, 리스트, 버튼 활용 예시  (0) 2024.03.25
[HTML5] 체크박스/라디오박스/콤보박스  (0) 2024.03.25
[HTML5] form  (0) 2024.03.24
[HTML5] 셀 병합  (0) 2024.03.24
[HTML5] 하이퍼링크 & 앵커  (0) 2024.03.24
728x90

폼 종류

 

폼 예시)

<!DOCTYPE html>
<body>
<form>
    이름 : <input type="text" value="tom"><br>
    암호 : <input type="password" value"" maxlength="4"><br>
    메모장 : <textarea cols="10" rows="5">메모하세요</textarea>
</form>
</body>
</html>

 

 

 

 

폼 예시)

  • <legend> 태그는 폼(form) 내부에서 사용됨
  • <fieldset> 태그와 함께 사용하여 그룹화된 폼 요소들의 제목(범례)을 지정할 때 사용함
  • <fieldset> 태그는 관련된 폼 요소들을 하나의 그룹으로 묶어주는 역할을 하며, <legend> 태그는 이 그룹의 이름이나 설명을 제공한다
  • <legend> 태그는 <fieldset> 태그 내부의 첫 번째 자식으로 위치해야 한다
<!DOCTYPE html>
<html lang="en">

<body>

    <h1>회원가입을 축하합니다</h1>

    <fieldset>
        <legend>사용자 정보</legend>
        <ul>
            <li>
                아이디<input type="text">
            </li>
            <li>
                이메일<input type="email">
            </li>
            <li>
                비밀번호<input type="password">
            </li>

            <li>
                비밀번호 확인<input type="password">
            </li>
        </ul>
    </fieldset>
</body>

</html>

728x90

'MarkUp > HTML5' 카테고리의 다른 글

[HTML5] 체크박스/라디오박스/콤보박스  (0) 2024.03.25
[HTML5] 시멘트 태그  (0) 2024.03.25
[HTML5] 셀 병합  (0) 2024.03.24
[HTML5] 하이퍼링크 & 앵커  (0) 2024.03.24
[HTML5] 리스트, 표 종합 예시문제  (0) 2024.03.21

+ Recent posts

티스토리툴바