모각코 -html(2)

조민솔·2022년 7월 23일

모각코

목록 보기
3/12
post-thumbnail

폼만들기

<form action="></form>

>폼 요소에 레이블을 붙이는 태그

label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트이다.

   ```1.<label>아이디<input type="text"></label>
   2.<label for="user-id">아이디(6자 이상)</label>
     <input type="text" id="user-id">
           label for과 id를 또같이 설정해야한다

>사용자 입력을 위한 input태그 유형

 <input type="text">
<fieldset>
    <label>아이디:<input type="text" id="user_id" size="10"></label>
    <label>비밀번호:<input type="password" id=""user_pw size="10"></label>
    <input type
           
           
           <br>="submit" value="로그인">
  </fieldset>
아이디: 비밀번호:

check box 여러개 선택가능

radio한개만 선택 name 같은 값으로 줘야 둘중 하나 선택 가능

input태그의 속성

<autofocus> 마우스 포인터를 생성
<placeholder> 텍스트 필드에 힌트 형성
<readonly>
<required>
<textarea> 여러 줄을 입력하는 텍스트 영역 
  cols(가로 너비를 문자 단위로) roews(세로 길이를 줄단위로)
  <label for="memo">메모</label>
    <textarea id="memo" cols="40" rows="10"></textarea>
<select>:드롭다운 목록의 시작과 끝 나타냄
<option>: 항목 추가
  <label for="prod1">상품 선택</label>
<select id="prod1">
  <option value="special_3" selected>선물용 3kg</option> <!--기본 항목--->
  <option value="special_5">선물용 5kg</option>
  <option value="family_3">가정용 3kg</option>
  <option value="family_5">가정용 5kg</option>
</select>
  <datalist><option>: 데이터 목록을 만들어줌
    <label for="prod2">포장 여부 </label>
<input type="text" id="prod2" list="pack"> <!--list와 id똑같게--->
<datalist id="pack">
  <option value="package">선물 포장</option>
  <option value="no_package">포장 안 함</option>
</datalist>  

0개의 댓글