html 입력 양식 태그 <form>

Html5

html 입력 양식 태그 <form>

원2 2021. 5. 3. 15:45

728x90

l 텍스트/ 비밀번호 입력양식

<!DOCTYPE html>
<body>
    <form>
        <p>이름 : <input type="text" name="name" size="10"></p>
        <p>학번 : <input type="text" name="name" size="10"></p>
        <p>학과 : <input type="text" name="school" value="컴퓨터학과"></p>
        <p></p>
        <input type="submit" value="전송">
        <input type="reset" value="다시작성">
    </form>
</body>

l 비밀번호 입력 양식

<!DOCTYPE html>
<body>
    <h2>회원 인증 입력 양식</h2>
    <form>
        <p>ID : <input type="text" name="ID" size="15" required></p>
        <p>PW : <input type="password" name="psw" size="15" placeholder="비밀번호" required></p>
        <p></p>
        <input type="submit" value="전송">
        <input type="reset" value="다시작성">
    </form>
</body>

l 텍스트 공간 입력 양식

- 텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능

<!DOCTYPE html>
<body>
    <h2>텍스트 공간 입력 양식</h2>
    <form>
        <textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.</textarea>
        <p></p>
        <input type="submit" value="전송">
        <input type="reset" value="다시작성">
    </form>
</body>

l <fieldset> 태그

- 입력 폼이 여러 개 있을 때, 경계선을 그려서 하나의 그룹으로 만들 때 사용

<!DOCTYPE html>
<body>
    <form>
        <fieldset>
            <legend>개인 정보 입력</legend>
            <p>이름 : <input type="text" name="name"></p>
            <p>학교 : <input type="text" name="school"></p>
            <input type="submit" value="제출">
            <input type="reset" value="다시작성">
        </fieldset>
    </form>
</body>

l 라디오 입력 양식

- 여러 항목 중 하나만 선택할 때 사용

<!DOCTYPE html>
<body>
    <form>
        <h3>당신의 성별은 무엇입니까?</h3>
        <input type="radio" name="sex" value="male" checked>남자
        <input type="radio" name="sex" value="female">여자
        <p></p>
        <h3>당신은 몇 학년 입니까?</h3>
        <input type="radio" name="year" value="1" checked>1학년
        <input type="radio" name="year" value="2" >2학년
        <input type="radio" name="year" value="3" >3학년
        <input type="radio" name="year" value="4" >4학년
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l 체크박스 양식

- 동시에 여러 항목을 선택할 때 사용

<!DOCTYPE html>
<body>
    <form>
        <h3>현재 관심을 가지고 있는 학습 주는 무엇입니까?</h3>
        <input type="checkbox" name="subject" value="HTML5" checked>HTML5 <br>
        <input type="checkbox" name="subject" value="CSS3" >CSS3 <br>
        <input type="checkbox" name="subject" value="Javascript" >Javascript <br>
        <input type="checkbox" name="subject" value="Jquery" >Jquery <br>
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l 버튼 양식

- <button> 태그 혹은 <input> 태그를 사용하여 정의

이미지는 html 폴더안에 같이 있거나 경로를 세부적으로 지정해서 입력해야한다.

<!DOCTYPE html>
<body>
    <form>
        <h3>Button 태그 사용</h3>
        <button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>
        <h3>Input 태그 사용</h3>
        <input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">
        <h3>Image 버튼 사용</h3>
        <button type="button" onclick="alert('클릭-3 사용')"><img src="button.jpg"> </button>
    </form>
</body>

l 선택 목록

- 펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 양식

<!DOCTYPE html>
<body>
    <h3>관심 있는 학습 주제 한 가지를 선택하세요.</h3>
    <form>
        <select name="sujects">
            <option value="1" selected>HTML5</option>
            <option value="2">CSS3</option>
            <option value="3">Javascript</option>
            <option value="4">Jquery</option>
        </select>
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l 다중 선택

- Multiple 속성 사용

<!DOCTYPE html>
<body>
    <h3>관심 있는 학습 주제를 모두 선택하세요.</h3>
    <form>
        <select name="subjects" size="4" multiple>
            <option value="1" selected>HTML5</option>
            <option value="2">CSS3</option>
            <option value="3">Javascript</option>
            <option value="4" selected>Jquery</option>
        </select>
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l <optgroup> 태그

- 여러 항목을 그룹으로 묶을 수 있음

<!DOCTYPE html>
<body>
    <h3>그룹별 선택 항목을 제공합니다.</h3>
    <form>
        <label>전공 분야를 선택하세요.
        <select name="major">
            <optgroup label="computer">
                <option>Software</option>
                <option>Robot</option>
                <option>System</option>
            </optgroup>
            <optgroup label="language">
                <option selected>English</option>
                <option>Japan</option>
                <option>Korean</option>
            </optgroup>
            <optgroup label="business">
                <option>Service</option>
                <option>Education</option>
                <option>Communication</option>
                <option>Marketing</option>
            </optgroup>
            </select>
            <p></p>
            <input type="submit" value="선택">
            <input type="reset" value="다시선택">
        </label>
    </form>
</body>

l <datalist> 태그

- 텍스트 입력 시 자동완성 기능 제공

<!DOCTYPE html>
<body>
    <h3>선택사항을 직접 입력하세요.</h3>
    <form>
        <label>전공 분야를 입력하세요.
            <input type="text" list="majorlist" name="major">
            <datalist id="majorlist">
                <option value="Software">소프트웨어</option>
                <option value="Robot">로봇</option>
                <option value="System">시스템</option>
                <option value="Service">서비스</option>
                <option value="Education">교육</option>
            </datalist>
            <p></p>
            <input type="submit" value="완료">
            <input type="reset" value="다시작성">
        </label>
    </form>
</body>

l <input type=“date”> 입력 폼

- 년-월-일 단위로 원하는 날짜 입력할 수 있음

<!DOCTYPE html>
<body>
    <form>
        <h3>오늘 날짜 입력</h3>
        Today : <input type="date" name="today">
        <h3>프로젝트 수행 기간</h3>
        From : <input type="date" name="from" min="2016-03-01" max="2016-12-31">
        To : <input type="date" name="to" min="2018-03-01" max="2018-06-30">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l type 속성값

- month : 년-월 단위로 날짜 입력

- week : 년-주 단위로 날짜 입력

<!DOCTYPE html>
<body>
    <form>
        <h3>생일(년/월) 입력</h3>
        생일 : <input type="month" name="birth">
        <h3>주간 계획 (년/주) 입력</h3>
        주간 계획 : <input type="week" name="weekeend">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l type 속성값

- time : 시간만 입력

- datetime : 년-월-일-시간 단위로 입력

<!DOCTYPE html>
<body>
    <form>
        <h3>현재 시간 입력</h3>
        Time : <input type="time" name="Now">
        <h3>생일(년도, 월, 일, 시간) 입력</h3>
        Birthday : <input type="datetime-local" name="bdaytime">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l <input type=“color”> 입력 폼

- 색상 칩에서 원하는 색상을 선택할 수 있음

<!DOCTYPE html>
<body>
    <form>
        <h3>원하는 색상을 선택하세요.</h3>
        <input type="color" name="color_value" value="#0000ff">
        <p></p>
        <input type="submit" value="선택완료">
        <input type="reset" value="다시선택">
    </form>
</body>

l <input type=“number”> 입력 폼

- 숫자를 입력할 수 있음

<!DOCTYPE html>
<body>
    <form>
        <h3>나이를 입력하세요.</h3>
        <input type="number" name="count" min="1" max="130">
        <p></p>
        <input type="submit" value="완료">
        <input type="reset"  value="초기화">
    </form>
</body>

l <input type=“range”> 폼

- 특정 범위의 숫자를 선택할 때 사용

<!DOCTYPE html>
<body>
    <form>
        <h3>0~100 범위에서 원하는 지점을 선택하세요.</h3>
        <input type="range" name="point" min="0" max="100">
        <p></p>
        <input type="submit" value="완료">
        <input type="reset" value="초기화">
    </form>
</body>

l 이메일 입력 양식

- 텍스트 상자와 외형은 같지만 이메일 형식에 맞게 정확하게 작성하지 않으면 경고 메시지가 나타남

<!DOCTYPE html>
<body>
    <form>
        <h3>이메일을 정확하게 입력하세요.</h3>
        이메일 : <input type="email" name="myemail">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l URL 입력 양식

- 입력한 URL이 http://로 시작하지 않는 등 형식에 맞지 않는다면 새로 입력하라는 메시지가 나타남

<!DOCTYPE html>
<body>
    <form>
        <h3>홈페이지 주소를 입력하세요.</h3>
        홈페이지 : <input type="url" name="myhome">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

l 검색 양식

- 검색어를 입력할 때 사용

<!DOCTYPE html>
<body>
    <form>
        <h3>검색어를 입력하세요.</h3>
        구글검색 : <input type="search" name="googlesearch">
        <p></p>
        <input type="submit" value="제출">
        <input type="reset" value="다시작성">
    </form>
</body>

막대 그래프 양식

l <meter> 태그

- 지정된 값을 표현하기 위해 사용

l <progress> 태그

- 다운로드 상태 표시 같이 현재 진행율이 어떻게 되고 있는지를 나타낼 때 사용

<!DOCTYPE html>
<body>
    <form>
        <h3>학습량 그래프</h3>
        홍길동 : <meter min="0" max="100" optimum="50" value="60">60 out of 100</meter><br>
        김가나 : <meter low="0.3" high="0.5" value="0.22">22%</meter><br>
        이다라 : <meter low="0.25" high="0.75" optimum="0.8" value="0.7">20%</meter>
        <p></p>
        <h3>작업 진행율</h3>
        초기 작업 : <progress value="22" max="100" title="진행율">22%</progress><br>
        중간 작업 : <progress value="0.77" max="1">77%</progress><br>
        다음 작업 : <progress value="0.98" max="1">98%</progress><br>
        
    </form>
</body>

l 읽기 전용 속성 : readonly

- 텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정

l 비활성화 속성 : disabled

- 텍스트 상자를 비활성화 시킴

l 자동 완성 속성 : autocomplete

- 사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음

l 자동 포커스 속성 : autofocus

- 현재 페이지가 로드될 때 처음으로 입력하고자 하는 폼을 선택하는 속성

l 플레이스 홀더 속성 : placeholder

- 현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성

l 필수 입력 속성 : required

- 반드시 데이터가 입력되어야 하는 폼을 지정하는 속성

l 오타 체크 속성 : spellcheck

- 입력되는 문장의 오타를 실시간으로 점검

728x90

저작자표시 (새창열림)

'Html5' 카테고리의 다른 글

글자수 제한 (0)	2022.01.18
onclick에 target 걸기 (0)	2021.08.15
공간 분할 태그 (0)	2021.05.04
html 기본 태그 (0)	2021.05.03

현재글html 입력 양식 태그 <form>

처음부터 시작하는 Java

hello world!

intellij, js, java, Docker, sql, react, OpenLayers, 알고리즘, array, useState, jpa, Git, GIS, Kotlin, SPREAD, useReducer, vue, 프로그래머스, datatables, springboot,

Today :
Yesterday :

처음부터 시작하는 Java