web study

다양한 폼 관련 태그들 본문

web/html

다양한 폼 관련 태그들

nayeon web 2022. 12. 28. 14:05 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다양한 폼 관련 태그들</title>
</head>
<body>
    <h1>다양한 폼 관련 태그들</h1>
    <h2>input 태그</h2>
    <mark>인라인 요소로 폼 안의 기본적인 필드 값을 만들 떄 사용. 빈요소</mark>

    <form action="">
        <section>
            <h3>type="text" / type ="password"</h3>
            사용자명 : <input type="text" name="user_name" id="userName"
            maxlength="8" placeholder="이곳에 이름을 작성하세요" minlength="2" required="required">
            <br>
            비밀번호 : <input type="password" name="user_pw" id="userPw" minlength="5" placeholder="이곳에 비밀번호를 입력하세요" required="required">
            <br>
            기본 전송 버튼
            <input type="submit" name="submint" value="확인">
            <br>
            취소 버튼
            <input type="reset" name="reset" value="취소">
            <br>
            버튼
            <input type="button" name="btn" value="버튼">
        </section>

        <section>
            <h3>여러 줄의 텍스트 박스</h3>
            <textarea name="txtBox">인라인. 이 안에 글 작성시 박스안에 출력.</textarea>
        </section>

        <section>
            <h3>라디오 버튼</h3>
            <p>하나의 값만 선택 가능. <strong>name 속성은 반드시 같아야 함</strong></p>
            <input type="radio" name="choice" value="선택1">선택1
            <input type="radio" name="choice" value="선택2" checked>선택2
            <input type="radio" name="choice" value="선택3">선택3
            <input type="radio" name="choice" value="선택4">선택4
        </section>

        <section>
            <h3>체크박스 버튼</h3>
            <p>여러 개의 값 선택 가능. <strong>name 속성은 반드시 같아야 함</strong></p>
            <input type="checkbox" name="decide" value="선택1" checked>선택1
            <input type="checkbox" name="decide" value="선택2" checked>선택2
            <input type="checkbox" name="decide" value="선택3" >선택3
            <input type="checkbox" name="decide" value="선택4" >선택4
        </section>

        <section>
            <h3>드롭다운 형태의 메뉴</h3>
            <select name="menu">
                <option value="선택1">선택1</option>
                <option value="선택2">선택2</option>
                <option value="선택3" selected>선택3</option>
                <option value="선택4">선택4</option>
            </select>
        </section>

        <section>
            <h3>파일 첨부 버튼</h3>
            <input type="file" name="user_file" accept=".jpg, .png, .pdf"><br>
            <input type="file" name="user_file"><br>
            <button type="submit">전송</button>
            <button type="reset">취소</button>
        </section>

        <section>
            <h3>html5에서 새로 정의된 태그들</h3>
            <p>날짜
                <input type="date" name="yymmdd">
            </p>
            <p>숫자
                <input type="number" name="number">
            </p>
            <p>이메일
                <input type="email" name="email">
            </p>
            <p>url
                <input type="url" name="url">
            </p>
            <p>검색
                <input type="search" name="search">
            </p>
            <p>범위 설정
                <input type="range" name="range">
            </p>
            <p>사용불가(비활성화)
                <input type="text" name="txt" disabled>
            </p>
        </section>
    </form>
</body>
</html>
다양한 폼 관련 태그들

다양한 폼 관련 태그들

input 태그

인라인 요소로 폼 안의 기본적인 필드 값을 만들 떄 사용. 빈요소

type="text" / type ="password"

사용자명 :
비밀번호 :
기본 전송 버튼
취소 버튼
버튼

여러 줄의 텍스트 박스

라디오 버튼

하나의 값만 선택 가능. name 속성은 반드시 같아야 함

선택1 선택2 선택3 선택4

체크박스 버튼

여러 개의 값 선택 가능. name 속성은 반드시 같아야 함

선택1 선택2 선택3 선택4

드롭다운 형태의 메뉴

파일 첨부 버튼



html5에서 새로 정의된 태그들

날짜

숫자

이메일

url

검색

범위 설정

사용불가(비활성화)

'web > html' 카테고리의 다른 글

폼그룹화 fieldset  (0) 2022.12.28
폼기본 form  (0) 2022.12.28
표 영역의 그룹화  (0) 2022.12.28
행병합 rowspan  (0) 2022.12.27
열병합 colspan  (0) 2022.12.27
'web/html' Related Articles more