FlowerBombs

입력양식 태그 (1) 본문

HTML&CSS/HTML5

입력양식 태그 (1)

CitronLemon 2019. 3. 15. 15:09


입력 양식을 표시하는 <input> 태그


<input>태그





1
2
<input name="이름(영어)" id="식별자(영어)" type="종류" 
    [value="기본값"] [maxlength="숫자" ] />
cs


- name 속성 

: 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시 해야 함.

- id 속성

: 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 함.


- id값과 name값은 서ㅗㄹ 동일하게 지정해도 무관하다.


- type 속성에 따라 화면에 표시되는 요소의 종류가 결정

  (text,pw., hidden 등)



요소의 제목 표시하기

1
2
3
<label for="input요소에 부여한 id값">...제목...</label>
<input name"이름(영어)" id="식별자(영어)" type="종류"
        [value="기본값"] [maxlength="숫자"] [cheked] />
cs


- <label>태그는 입력 요소 앞이나 뒤에서 표시되는 제목을 구성한다.

- <label>태그와 <input>태그의 순서는 변경될 수 있으며,

반드시 함꼐 연달아 표시될 필요는 없다.



장문을 입력하기 위한 요소

1
2
3
4
<label for="input요소에 부여한 id값">...내용...</label>
<textarea name="이름(영어)" id="식별자(영어)" [maxlength="숫자"]>
... 기본적으로 작성되어 는 내용 ...
</textarea>
cs



placeholder속성

1
2
3
<input name="이름(영어)" id="식별자(영어)" type="종류"
        [value="기본값"] [maxlength="숫자"]
        [placeholder="설명글"] />
cs

- 값이 입력되기 전에 보여질 설명글 표시




기본 양식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 입력 양식 기본 구성 -->
<body>
    <!-- 입력 내용을 감싸기 위한 부분 -->
    <form>
        <!-- 입력 내용에 한 그룹을 명시하는 부분-->
        <fieldset>
            <!-- 그룹의 제목 -->
            <legend>내용 입력하기</legend>
            <!-- 입력 요소 배치 -->
            <div>
                <label for="user_id">아이디</label>
                <input type="text" name="user_id" id="user_id" 
                    maxlength="20" placeholder="아이디를 입력하세요." />    
            <div>
 
 
        </fieldset>
    </form>
</body>
cs



table -> tbody -> tr->



type="radio" or type="checkbox"


1
2
3
<input name="이름(영어)" id="식별자(영어)" type="checkbox|radio"
        value = "기본값" [checked] />
<label for ="input요소에 부여한 id값">...제목...</label>
cs


- Radio : 여러 항목 중 한 가지만 선택 가능함 

- Checkbox : 여러 항목 중 복수로 선택 가능함.


<예시>

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
29
30
31
32
33
34
35
36
<body>
    <form>
        <fieldset>
            <legend>좋아하는 과일 선택</legend>
            <div>
                <!-- 체크박스 -->
                <input type="checkbox" name="fruit" id="fruit1"
                    value="복숭아" checked />
                <label for="fruit1">복숭아</label>
                <input type="checkbox" name="fruit" id="fruit2"
                    value="레몬" checked />
                <label for="fruit2">레몬</label>
                <input type="checkbox" name="fruit" id="fruit3"
                    value="사과" checked />
                <label for="fruit3">사과</label>
            </div>
        </fieldset>
 
        <br />
 
        <fieldset>
            <legend>선호하는 커피 선택</legend>
            <div>
                <!-- 라디오 버튼 -->
                <input type="radio" name="coffee" id="coffee1"
                    value="coffee1"/>
                <label for="coffee1">카라멜마끼야또<label>
                <input type="radio" name="coffee" id="coffee2"
                    value="coffee2"/>
                <label for="coffee">아이스 아메리카노<label>
            </div>
        </fieldset>
    </form>
</body>
 
 
cs


<결과>







저작자표시 비영리 변경금지

'HTML&CSS > HTML5' 카테고리의 다른 글

입력양식 태그 (2) 드롭다운 / 파일첨부하기 /데이터 전송하기  (0) 2019.03.15
기본 입력 양식  (0) 2019.03.13
멀티미디어 (이미지/  (0) 2019.03.13
페이지 이동처리 (링크)  (0) 2019.03.08
문장이나 단어 강조하기  (0) 2019.03.08
'HTML&CSS/HTML5' Related Articles more
Comments