티스토리 뷰

development/html javascript CSS

[HTML] form

Happyoon ~ 2021. 10. 7. 13:17
728x90
반응형

핵심

1. label 작성법

   (1) label for 사용하기

   (2) label 자식요소로 input 넣기 

2. label 의 for 속성의 값과 input의 id 속성의 값이 동일하게 작성되어야 함.

3. fieldset legend는 label이 제공하는 정보 외에 추가적인 정보를 제공함.(ex. legend: 성별, label: 남)

4. radio에서 name 속성의 value가 똑같으면 그룹으로 묶임.

5. chekbox에서는 name 속성의 value가 똑같더라도 그룹으로 묶이지 않음.

6. option에 value가 없다면 innerText를 전송함.

7. select 안에서 카테고리를 지정하고 싶으면 optgroup을 사용함.

8. submit은 꼭 폼 안에 작성해야함.

9. 폼 작성 후 제출하면, name = value( or innerText ) 형태로 전송된 모습을 주소창에서 확인할 수 있음. 

예제1

 

<!DOCTYPE html>
<html lang="en">
<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>Step09_form.html</title>
</head>
<body>
    <h1>폼(form) 요소 작성하기</h1>
    <!-- 
        form 은 서버에 전송할 양식이다
        action="서버에 전송할 위치(요청경로)"  
        현재는 서버가 없기 때문에 action 을 테스트 할수는 없다. 
    -->
    <form action="login.jsp">
        <!-- form action = ~ : 서버의 어디로 보낼지 위치 결정  -->
        <!-- 
            label 의 for 속성의 값과
            input 의 id 속성의 값과 동일하게 작성이 되어야 된다.
        -->
        <label for="email">이메일</label>  
        <!-- 뭘 입력하는지 밝혀주는 요소. label이 필요한 이유?
        "접근성"에 대해 고려해야함. 
        시각장애인 등을 위해 id 속성과 label for 속성이 동일하면 음성으로 읽어줌.
        name value는 서버에서 필요한 값 -->
        <input type="text" id="email" name="email">
        <!-- 
            name 속성의 값은 서버에서 필요한 값이다. 
        -->
        <label for="pwd">비밀번호</label>
        <input type="password" id="pwd" name="pwd">
        
        <button type="submit">로그인</button>
        <!-- submit: 제출. 꼭 폼 안에 작성해야 함.-->
        <button type="reset">취소</button>
        <!-- reset: 초기 값으로 되돌려주는 역할. -->
    </form>
</body>
</html>

예제2

<!DOCTYPE html>
<html lang="en">
<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>Step09_form2.html</title>
    <style>
        #comment{
            width: 500px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>회원 가입 폼 입니다.</h1>
    <form action="signup.jsp">
        <label for="email">이메일</label>
        <input type="text" id="email" name="email"><br>
        <!-- 
            fieldset , legend 요소가 왜 필요한지와
            label 텍스트를 제공하는 새로운 방법을 익히세요
            input type="radio" 에서 name 속성의 값이 같으면 
            같은 그룹으로 묶인다.
        -->
        <!-- fieldset, legend로 label 외에 추가 정보를 제공함. 
        ex. label: 남자, legend: 성별 정보 선택(추가정보) -->
        <fieldset>
            <legend>성별 정보 선택</legend>
            <label>
                <!-- label 작성법.
                1. label for 사용하기
                2. 자식요소에 input 집어 넣기-->
                <!-- value="선택 했을때 서버에 전송할 문자열" --->
                <input type="radio" name="gender" value="man" checked> 남자
            </label>
            <!-- checked 속성은 기본값으로 설정.(페이지 로딩 시점에 무엇이 선택되어 있을지)
                checked처럼 value가 없는 속성도 존재함 -->
            <label>
                <input type="radio" name="gender" value="woman"> 여자
            </label>
            <!-- radio일때, name속성의 value가 똑같으면 그룹으로 묶임 
                => 둘 중에 하나만 선택 가능해짐 (예시. 남,여)  -->
        </fieldset>
        <!-- 
            input type="checkbox" 는 name 속성의 값이 모두 같아도 
            그룹으로 묶이지 않는다.
        -->
        <fieldset>
            <legend>취미 정보 선택</legend>
            
            <label>
                <input type="checkbox" name="hobby" value="soccer"> 축구
            </label>
            <label>
                <input type="checkbox" name="hobby" value="baking"> 베이킹
            </label>
            <label>
                <input type="checkbox" name="hobby" value="piano"> 피아노
            </label>
            <label>
                <input type="checkbox" name="hobby" value="etc"> 기타
            </label>
            <!-- checkbox는 name 속성의 value를 똑같이해도 그룹으로 묶이지 않음
            => 여러 개 선택 가능 -->
        </fieldset>
        <label for="job">직업선택</label>
        <select name="job" id="job">
            <option value="">선택</option>
            <option value="programmer">프로그래머</option>
            <option value="doctor">의사</option>
            <option value="pianist">피아니스트</option>
            <option value="etc">기타</option>
        </select>
        <br>
        <label for="lunch">점심 선택</label>
        <!-- option 에 value 가 없으면 innerText 가 전송된다.(입력후 주소창 보기!)
        name = value(or innerText)형식의 모습을 주소창에서 볼 수 있음 -->
        <select name="lunch" id="lunch">
            <optgroup label="분식">
                <option>라면</option>
                <option>쫄면</option>
                <option>김밥</option>
            </optgroup>
            <optgroup label="중식">
                <!-- select 안에서 카테고리 지정시 optgroup 사용 -->
                <option>자장면</option>
                <option>짬뽕</option>
                <option>군만두</option>
            </optgroup>
        </select>
        <br>
        <label for="myFile">첨부파일</label>
        <input type="file" id="myFile" name="myFile">
        <br>
        <label for="comment">하고 싶은말</label>
        <br>
        <textarea name="comment" id="comment"></textarea>
        <br>
        <button type="submit">가입</button>
    </form>
</body>
</html>

예제3

<!DOCTYPE html>
<html lang="en">
<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>Step09_form3.html</title>
</head>
<body>
    <h1>html5 에서 추가된 form 요소</h1>
    <form action="insert.jsp">
        <label for="color">색상선택</label>
        <input type="color" id="color" name="color">
        <br>
        <label for="range">범위</label>
        <input type="range" id="range" name="range" min="10" max="100" step="1" value="10">
        <!-- value는 페이지가 로딩되는 시점의 초기값 -->
        <br>
        <label for="date">날짜</label>
        <input type="date" id="date" name="date">
        <br>
        <label for="time">시간</label>
        <input type="time" id="time" name="time">
        <br>
        <label for="number">숫자</label>
        <input type="number" id="number" name="number" min="0" max="100" step="10">
        <br>
        <button type="submit">저장</button>
    </form>
</body>
</html>

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] object와 function  (0) 2021.10.07
[HTML] anchor  (0) 2021.10.07
[HTML] table  (0) 2021.10.07
[HTML] dl dt dd  (0) 2021.10.06
[HTML] ul과 ol  (0) 2021.10.06
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함