[ html ] 사용자입력 form / input / select / label

33922 단어 htmlhtml

form

  • 사용자 입력에 필요한 레이아웃 구성
    - ex) 로그인, 회원가입, 카드번호 등
  • 속성
    • action : 데이터를 주고받는 경로 입력
    • method : 데이터를 주고받는 방식 입력
      -> 개발자가 입력하는 것이므로, 퍼블리셔는 빈 속성만 입력
  • 내부태그
    • <fieldset> = 그룹핑, 테두리가 만들어진다.
    • <legend> = 그룹의 제목 
<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            --- 코드 입력 ---
        </fieldset>
    </form>
</body>

input

  • 사용자 입력이 실제로 이루어지는 곳

  • 보통 <form> 태그 안에서 쓰여진다.

  • type=""

    • text = 한줄 입력상자 (아이디, 이름)

      • readonly : 읽기전용
      • disabled : 비활성화
      • maxlength = "글자수"
      • value = "입력하세요"

    • password = 비밀번호 입력상자 (비밀번호, 주민등록번호 뒷자리)

      • 위의 속성 동일하게 사용 가능

    • radio = 단일 선택상자 (성별, 동의/동의안함)

      • name = "그룹네임" (name이 같은 것 중 하나만 선택가능)

    • checkbox = 다중 선택상자

    • file = 첨부파일 상자

    • image = 이미지 첨부

    • submit = 전송버튼 (보통 a를 많이 대체해서 쓴다.)

    • reset = 초기화, 취소 버튼 (a로 대체)

    • button = <button> 태그와 같이 어디서든 쓰일 수 있는 범용버튼

    • hidden = 사용자에게 보이지 않는 입력폼 (데이터 전송이 목적이므로, 개발자가 사용한다.)

👇 이 외, 날짜 및 시간 등 유용한 type은 코드로 확인 !

<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            
            <input type="text" maxlength="8"  value="아이디를 입력하세요.">
            <input type="password">
            
            <input type="radio" name="sex">남자 
            <input type="radio" name="sex">여자 
            
            <input type="checkbox"> 1
			<input type="checkbox"> 2 
			<input type="checkbox"> 3 
            
            <input type="file">
			<input type="image" src="/images/image1.png" alt="대체텍스트">
                    
            <input type="submit" value="파일전송"> 
			<input type="reset" value="취소"> 
			<input type="button" value="일반버튼"> 
            
			<input type="hidden"> 
            
            <input type="date">
            <input type="datetime-local">
            <input type="month">
            <input type="time">
            
            <input type="email"> 
            <!-- 모바일 : 이메일 키보드 생성 -->
            <input type="number">
            <!-- 모바일 : 숫자 키보드 생성  -->
            <input type="search">
            <!-- 안드로이드 : 돋보기 , IOS : return 버튼생성 -->
            <input type="tell">
            <!-- 전화번호 키패드 호출 -->
            <input type="url">
            <!-- www.(안드로이드) / .com 키패드 제공 -->
            
        </fieldset>
    </form>
</body>

textarea

  • 다중 편집창
  • 속성 : 실제 보이는 상자 사이즈 지정, 사용자는 그 이상 입력 가능
    - rows="" = 엔터 수
    - cols="" = 글자 수 (정확하지 않음)
    • 보통 css에서 크기를 지정하는데, 이 속성이 없으면 웹표준에 부합하지 않기 때문에 빈 속성으로 넣어둔다.

<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            
            <textarea rows="" cols="">직접 입력하세요.</textarea>
            
        </fieldset>
    </form>
</body>

select

  • 목록 선택상자
  • 속성
    - multiple = 여러개 선택 가능
  • 내부태그
    • optgroup = 그룹핑
    • option = 선택목록 
<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            
            <select multiple>
                <optgroup label="서울">
                    <option>강서</option>
                    <option>강북</option>
                    <option>강남</option>
                </optgroup>
                <optgroup label="경기도">
                    <option>부천</option>
                    <option>인천</option>
                    <option>광주</option>
                </optgroup>
            </select>
            
        </fieldset>
    </form>
</body>

label / 명시적레이블

1. <input type="radio"> 와 함께 쓰일 때 !

  • 현재 선택이 무엇을 가리키는지 지정해줌으로써 텍스트를 클릭해도 선택이 가능해지도록 한다.
  • input 태그의 id와 label 태그의 for 속성 내용을 동일하게 작성하여 서로 연결해준다.
<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            
 			
			<input type="radio" name="sex" id="man"><label for="man">남자</label>
			<input type="radio" name="sex" id="woman"><label for="woman">여자</label>

        </fieldset>
    </form>
</body>

2. select와 연결할 때 !

  • id 와 for 속성값을 동일하게 입력하여 서로 연결해준다.
  • 두번째, 세번째 자리 입력은 title을 사용하여 명시해준다. (커서를 올리면 텍스트가 보임)
<body>
	<form action="" method="">   
    	<fieldset>
        	<legend> 제목 </legend>
            
			<label for="phone">핸드폰번호</label>
            <select id="phone">
                <option>010</option>
                <option>016</option>
                <option>017</option>
            </select>
            - 
            <input type="text" title="핸드폰 두번째자리">
            -
            <input type="text" title="핸드폰 세번째자리">

        </fieldset>
    </form>
</body>
[🤗 강좌 6.3] "빠른(fast)" 토크나이저의 특별한 능력
2. JPA 시작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage