input 태그의 다양한 속성

autofocus :처음에 사이트에 들어왔을때 바로 마우스커서가 표시되는 폼을 지정합니다.
placeholder :예를 들어 ex)zzz@xxxxx.com같은 예를 표시할 때 사용합니다.
readonly :사용자가 보기만하고 수정하지 못하게 내용을 만들때 사용합니다.
required :꼭 입력해야하는 필수 사항을 지정합니다.
min :수량 같은경우 최소 숫자를 지정합니다.
max :수량 같은경우 최대 숫자를 지정합니다.
step :수량을 높이거나 줄일때 커지거나 작아지는 값을 정합니다.(몇개단위 같은경우)
size : 표시할 수 있는 글자의 수를 지정합니다.
maxlength :최대입력 가능한 글자 수를 지정합니다.
minlength :최소입력 가능한 글자 수를 지정합니다.
코드예시↓
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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <form>
        <label for="p">로그인
            <input name="p" type="text" autofocus value="id">
            <br>
            <input name="p" type="text" size="10" minlength="5" maxlength="15" required placeholder="password">
            <br>
            <input name="p" type="submit" value="확인"/>
            <br>
        </label>
        <label for="pr">공지</label>
            <br>
            <input name="pr" type="text" readonly value="읽기전용 입니다.">
            <br>
        <label for="p1">수량</label>
            <br>
            <input name="p1" type="number" min="10" max="100" step="10" value="20">
     </form>
</body>
</html>
cs
결과↓

여러정보 나열
<select> :말그대로 선택으로 드롭다운형태를 만들어줍니다.
속성
size :한번에 보여질 메뉴개수를 정합니다.
multiple :복수로 선택가능하게 해줍니다.
<option> :위의 드롭다운형태의 선택지를 만들어줍니다.
속성
value :서버로 넘겨질값을 지정합니다.
selected :선택되어있는 기본값을 지정합니다.
<optiongroup> :위의 선택지를 묶은 것입니다.(보통 상의어가 사용됩니다.)
<datalist> :텍스트필드에 사용자가 입력하지않고 옵션을 선택하는 것으로 필드가 채워지게 해줍니다.(select대신 쓰입니다.)
속성(정확히는 input에 쓰인다...)
value :위의 설명과 같습니다.
label :사용자에게 보여질 레이블을 input에 설정합니다.
<textarea> :여러줄 텍스트 영역을 만들어 줍니다.
속성
name :다른 영역과 구분을 위해 쓰입니다.
cols :가로길이를 지정합니다.
rows :세로길이를 지정합니다.
소스코드↓
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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <form>
        <label for="p">연습</label>
        <br>
        <!--Ctrl누른후 마우스로 두개 클릭하면 복수선택 가능합니다.-->
        <select size="2" multiple id="p">
            <option>선택1</option>
            <option value="choice2">선택2</option>
            <option selected>선택3</option>
        </select>
        <br>
        <input type="text" list="pr">
        <br>
        <datalist id="pr">
            <option value="ch1" label="선택1"></option>
            <option value="ch2" label="선택2"></option>
            <option value="ch3" label="선택3"></option>
        </datalist>
        <br>
        <textarea cols="80" rows="2">
..............................................................................
............................................................................
    </textarea>
    </form>
</body>
</html>
cs
사진↓

여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03
폼 관련태그  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
목록 관련태그  (0) 2018.01.03

폼 만들기

폼이란 비밀번호 입력창이나 체크박스 라디오박스등 웹에서 많이보이는 입력란등입니다.
태그의 종류
<form> :폼을 만들고 그안에 폼관련 태그를 넣습니다.

form태그의 속성
method :사용자입력값을 서버에 어떻게 넘겨줄지 정하는데 get은 사용자입력값이 드러나고 post는 드러나지않으며 입력수 제한이 없습니다.
name :폼의 구분을 위해 쓰입니다.
action :서버에서 폼의 내용을 처리할 프로그램을 지정합니다.
target :action태그에서 지정한 스크립트 파일을 어떤 창에서 실행할지 정합니다.

<input> :사용자 입력 값을 받을 폼을 만드는 태그입니다.

input태그의 속성
autocomplete :아이디 비밀번호를 입력할 때처럼 자동입력 기능을 on off할 수 있습니다.
type :사용자 입력 값을 받을 방식을 정합니다.(텍스트, 체크박스등등)
id :레이블태그의 for의 이름과 연결되어 다른 태그와 연결되어 쓰일 수 있게 만듭니다.(체크박스와 라디오버튼에 이용됩니다.)
size :필드 크기 값을 지정합니다.
checked :미리정해진 기본값을 표시해줍니다.(예 :체크박스 1번이 기본값인경우)

<label> :for속성으로 input태그를 연결해 줍니다.(라디오버튼 같은 경우 하나만 선택할 수 있게 해줍니다.)

fieldset과 legend태그
legend태그는 사용자에게 보여지는 창에서 '로그인'같은 이름으로 폼을 묶어줍니다.
fieldset태그는 묶어진 폼들에서 외곽선을 표시해줍니다.

예제↓
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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html 문서</title>
</head>
<body>
    <form method="post" name="practice" target="_blank">
        <fieldset>
            <legend>로그인</legend>
            <label for="로그인"><!--label태그의 사용1-->
                <input type="text" value="아이디를 입력해주세요." title="아이디" id="practice" autocomplete="on">
                <br>
                <input type="password" title="비밀번호" id="practice" autocomplete="on">
                <br>
                <input type="submit" title="로그인" id="practice" value="확인">
            </label>
        </fieldset>
        <br><!--라벨태그의 사용2-->
        <label for="search_id">아이디 검색</label>
        <input id="search_id" type="text"\ value="ex)xxxxxx@!!!!!.com">
        <input id="search_id" type="submit" value="찾기">
    </form>
    <dl>
        <dt>복수 선택가능</dt><!--텍스트 누르면 선택안됨...-->
        <dt><input type="checkbox" name="pr" value="a">a</dt>
        <dt><input type="checkbox" name="pr" value="b">b</dt>
    </dl>
    <dl>
        <dt>한개만 선택가능</dt><!--택스트 누르면 선택됨-->
        <dt><label><input type="radio" name="pr2" checked value="a">a</label></dt>
        <dt><label><input type="radio" name="pr2" value="b">b</label></dt>
    </dl>
</body>
</html>
cs
결과↓

여기까지 포스팅을 마치도록 하겠습니다.


저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

기타 폼 관련태그  (0) 2018.01.03
input 태그관련  (0) 2018.01.03
이미지 관련태그  (1) 2018.01.03
목록 관련태그  (0) 2018.01.03
텍스트관련 태그  (0) 2018.01.03

+ Recent posts

티스토리툴바