📕 입력 양식
- 사용자에게 정보를 입력받는 공간
📚 <form>
- html로 form의 겉모습(입력 양식)만 만들고, input을 받으면 서버에서 값을 처리.
<body>
<form>
<input type="text" name="search">
<input type="submit">
</form>
</body><form>_속성
- action = " (경로) "
<form action="fwrite_update.php"></form> : 전송 위치 (데이터를 전달할 목적지)- method = " (1. get 2. post) "
<form method = "get"></form> : 주소에 데이터를 직접 입력 (문자열)
<form method = "post"></form> : 별도의 방식 사용 (더 많은 데이터 전송 가능)📚 <label>
<label>_속성
- for = " (id) "
<form>
<p><label for="username">이름 : </label> : for : label과 id를 연관시키기
<input type="text" id="username"></p>
</form>
<form>
<p><label>이름 : <input type="text"></label></p> : 한번에 써도 가능
</form>📚 <input>
<input><input>_속성
- type = " (입력양식) "
<input type="text"> : 입력 태그의 유형- name = " text "
<input name="text"> : 서버로 전달되는 이름- value = " text "
<input value="text"> : 초기값 설정
<input value="radio /checkbox"> : 선택 시 서버로 넘어가는 값
<input value="button"> : 버튼에 표시할 내용- autocomplete = " (on, off) "
: on : 자동완성키기 (기본값)
: off : 자동완성끄기
<input type="text" autocomplete="on">- autofocus
: 페이지를 불러오자마자 입력 필드 안에 마우스 커서 표시
<input type="text" autofocus>- placeholder
: 필드 안에 적당한 힌트 내용을 표시하고 있다가 클릭하면 내용이 사라짐
<input type="text" placeholder="hint">- required
: 필수 입력 필드 체크
: hidden, image, button, submit, reset 사용불가
<input type="text" required><input type= "속성값">
사용자가 입력하는 입력 양식
- text
<input type="text"> : 글자 입력- password
<input type="password"> : 비밀번호 입력text 필드 & passowrd 필드 : 사용자가 한 줄짜리 텍스트를 입력하는 요소
1. name = " (필드이름) "
2. size = " (텍스트필드 길이) "
3. value = " (처음 화면에 표시되는 텍스트) " : password필드에는 없음.
4. maxlength = "(입력 가능한 최대 문자 개수)"<input type="text" name="username" id="username" size="20" maxlength="20"> <input type="password" name="password" name="pwd" id="pwd" size="20" maxlength="20">
id & name
id : 한 페이지 안에서 유일한 이름
name : 중첩 가능 (그룹화)
- radio
<input type="radio"> : 라디오 버튼 생성- checkbox
<input type="checkbox"> : 체크박스 생성radio 필드 & checkbox 필드
1. name = "라디오 버튼 / 체크박스 이름"
2. value = "선택했을 때 서버로 넘어가는 값"
3. checked 선택되어있음(default)
- radio : name이 같아야 한다.
<ul id ="sel1"> <li> <input type="radio" id="free" name="pay" value="free" checked> <label for="free">무료(교내참가자)</label> </li> <li> <input type="radio" id="paid" name="pay" value="paid"> <label for="paid">유료(교외참가자)</label> </li> </ul>
- file
<input type="file"> : 파일 입력보이지 않는 입력 양식
- hidden
<input type="hidden"> : 해당 내용 표시안함버튼
- button
<input type="button"> : 버튼 생성 : 버튼만 만듬. js를 연결해야 동작- reset
<input type="reset"> : 초기화 버튼 생성 : form에 입력된 것 초기화- submit
<input type="submit"> : 제출 버튼 생성 : 입력 내용 서버로 제출- image
<input type="image"> : 이미지 형태 생성 : submit 대신 이미지 삽입기타 입력 양식
11. email
<input type="email"></input> : email주소 입력- url
<input type="url"> : url주소 입력- tel
<input type="tel"> : url주소 입력- search
<input type="search"> : 검색- number
- range
number 필드 & range 필드
1. min = " (최솟값)"
2. max = " (최댓값) "
3. step = " (숫자 간격) "
4. value = " (초기값)"<input type="number" min="1" max="10" step="1" value="5"> <input type="range" min="1" max="10" step="1" value="6">
- date
<input type="date"> : 연도, 월, 날짜- datetime-local
<input type="datetime-local"> : 날짜, 시간(지역 시간대 기준)<input type="datetime"> : 날짜, 시간(UTC 시간대 기준) <input type="month"> : 연도, 월 <input type="week"> : 연도, 주 <input type="time"> : 시간
