폼 작성(3)

2025. 9. 9. 01:43ㆍ웹 기초/html

input 태그의 속성

  • autofocus속성 : 마우스 포인터가 깜박거리며 표시됨.
  • placeholder속성 : 택스트를 입력란에 표시하다가 클릭하면 내용이 사라지도록 하는 용도.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <label for="id_name">이름: </label>
                <input type="text" id="id_name" autofocus>
                <label for="id_schoolnum">학번: </label>
                <input type="password" id="id_schoolnum" autofocus placeholder="학번 8자리 입력">
            </fieldset>
        </form>
    </body>
</html>

-이름 옆에서 깜박이는 커서 형태를 autofocus를 통해서 적용.
-학번 8자리 입력처럼 마우스를 가져다 대기 전에 힌트처럼 보여주는 택스트를 placeholder를 통해서 적용.
  • readonly속성 : 말 그대로 읽기 전용으로 바꿀 때 사용.
  • required속성 : 반드시 입력할때 사용.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>

                <label for="id_name">이름: </label>
                <input type="text" id="id_name" value="ssjjss" readonly>
                <label for="id_schoolnum">학번: </label>
                <input type="password" id="id_schoolnum" required>
                <input type="submit" value="제출">
            </fieldset>
        </form>
    </body>
</html>

-이름 작성 란에서 ssjjss라고 value를 통해서 표시하고 readonly로 변경하지 못하도록 적용.
-학번 같은 경우는 작성하지 않는 다면 submit 하지 못하도록 required를 활용하여서 적용.

예제

  • 아래의 화면 만들어보기

더보기 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <legend>백준 회원가입</legend>
                <p>계정이 이미 존재하는 경우 <a href="https://www.acmicpc.net/login">로그인</a>해주세요.</p>
                <p>아이디가 구글 검색에 노출되는 것을 원치않는 분은 다른 곳에서 사용하지 않는 아이디를 사용해주세요.</p>
                <p>아이디의 구글 검색 노출은 회원가입 후 정보 수정에서 변경할 수 있습니다.</p>
                <p>가입 후 아이디는 변경할 수 없습니다.</p>
                <br>
                <label for="id_name">아이디</label>
                <p></p>
                <input type="text" id="id_name" placeholder="특수문자와 한글은 제외" size="50%">
                <p></p>
                <label for="id_sophisticated">상세 메시지(상대방에게 보여주고 싶은 메시지)</label>
                <p></p>
                <input type="text" id="id_sophisticated" size="50%">
                <p></p>
                <label for="id_pwd">비밀번호</label>
                <p></p>
                <input type="password" id="id_pwd" size="25%">
                <p></p>
                <label for="checkId_pwd">비밀번호 확인</label>
                <p></p>
                <input type="password" id="checkId_pwd" size="25%">
            </fieldset>
            <fieldset>
                <legend>이메일 수신 동의</legend>
                <label><input type="radio" name="email_t" checked>이메일 수신</label>
                <label><input type="radio" name="email_t">이메일 수신 안 함</label>
            </fieldset>
            <br>
            <input type="submit" value="제출하기">
            <input type="reset" value="초기화하기"> 
        </form>
    </body>
</html>

폼에서 사용하는 태그

  • <textarea> : 택스트를 여러 줄 입력하는 영역을 만들 수 있음. cols와 row속성으로 너비와 높이 조정 가능.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <label for="id_memo">메모</label>
                <textarea type="id_memo" cols="40" rows="4"></textarea>
            </fieldset> 
        </form>
    </body>
</html>

  • <select>, <option> : 드롭 다운 목록을 만들어줌.
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select>의 속성 
-size : 화면에 표시할 드롭 다운의 개수
-multiple : 드롭 다운 목록에서 둘 이상의 항목을 선택하는 경우

<option>의 속성
-value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
-selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <label for="school_id">학부 선택</label>
                <select id="school_id">
                    <option value="1" selected>컴퓨터학부</option>
                    <option value="2">소프트웨어학부</option>
                    <option value="3">AI융합부</option>
                    <option value="4">전자정보공학부</option>
                </select>
            </fieldset> 
        </form>
    </body>
</html>

  • <datalist>, <option> : 데이터 목록을 사용하여서 택스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택 가능.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <input type="text" list="school_id">
                <datalist id="school_id">
                    <option value="1" selected>컴퓨터학부</option>
                    <option value="2">소프트웨어학부</option>
                    <option value="3">AI융합부</option>
                    <option value="4">전자정보공학부</option>
                </select>
            </fieldset> 
        </form>
    </body>
</html>
  • value로 서버에 넘겨줄 값을 지정하는 데, 이 값이 텍스트 필드에도 나타남.

  • <button> : <input> 태그의 필드를 사용해서 버튼을 삽입한 것과 비슷하지만 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있음.
  • 버튼 태그 같은 경우에는 CSS를 활용하여서 꾸미거나 화면 낭독기로 웹 문서를 읽을 때 정확히 정보 전달이 가능함!

예제

  • 아래의 화면 구성으로 작성하기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
    </head>
    <body>
        <form action="">
            <fieldset>
                <h1>백엔드 개발자 지원서</h1>
                <p>백엔드 부문에서 깊은 실무 경험을 가진 분을 찾습니다.</p>
                <hr>
                <p>개인 정보</p>
                <label for="name_id">이름 </label>
                <input type="text" id="name_id" placeholder="공백 없이 입력하세요.">
                <p></p>
                <label for="phoneNum_id">연락처 </label>
                <input type="tel" id="phoneNum_id">

                <p>지원 분야</p>
                <label><input type="radio" name="backend_id">웹 백엔드</label>
                <p></p>
                <label><input type="radio" name="backend_id">AI/데이터 백엔드</label>
                <p></p>
                <label><input type="radio" name="backend_id">DevOps 백앤드</label>

                <p>지원 동기</p>
                <textarea placeholder="본사 지원 동기를 간력하게 작성 해주세요." cols="40"></textarea>

                <br>
                <button type="submit" value="1">접수하기</button>
                <button type="reset" value="2">다시 쓰기</button>
            </fieldset> 
        </form>
    </body>
</html>

'웹 기초 > html' 카테고리의 다른 글

폼 작성(2)  (0) 2025.09.08
폼 작성(1)  (1) 2025.09.08
적용(1)  (0) 2025.09.05
웹 문서 내용 입력(3)  (0) 2025.09.03
웹 문서 내용 입력(2)  (0) 2025.09.02

관련글

티스토리툴바