WebProgramming/HTML

HTML 문서에서 입력(form,input)

2022. 5. 5. 22:14
목차
  1. 1. form
  2. 2. input

1. form

<form action="처리할페이지주소" method="get/post"></form>

- action ; 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소 명시

- method ; 입력받은 데이터를 서버에 전달할 방식을 명시

get ; 주소에 데이터를 추가하여 전달하는 방식, 데이터가 주소 입력창에 그대로 나타남, 데이터 크기 제한적

post ; 데이터를 별도로 첨부하여 전달하는 방식, 데이터가 외부에 드러나지 않고, 데이터 크기 제한 x

 

2. input

<input type="타입유형" name="이름">

1. text ; 한 줄의 텍스트 입력

2. password ; 한 줄의 비밀번호 입력(별표처리)

3. radio ; 옵션 선택

- name="" 통일해주어야함, value =""; 선택했을 때 제출되는 값, checked ; 기본 선택

4. checkbox ; radio와 같음 but 다중 선택 가능

5. file ; 파일 선택 가능

 

6. <select></select> ; 여러 리스트 중 선택 가능

- select>option*n ; value="" 선택했을 때 제출되는 값, selected ; 기본 선택

7. <textarea></textarea> ; 여러 줄의 텍스트 입력

- rows ="", cols=""로 열과 행 설정. <textarea></textarea>사이에 글자를 넣어 기본 값 넣을 수 있음

8. <button></button> ; 버튼

- onclick="" ; 눌렀을 때 반응 설정, ex) alert('xxx'), <button></button>사이에 글자 넣을 수 있음

9. submit ; form의 action속성으로 지정된 서버 페이지로 전송

- value="" ; 버튼의 내용

10. <fieldset></fieldset> ; form요소와 관련된 데이터들을 하나로 묶어줌

- <legend> ; fieldset 요소 안에서만 사용 가능하며, fieldset 요소의 제목을 나타냄

 

input 속성

- value ; 입력필드에 나타나는 초깃값

- readonly ; 입력필드를 볼 수는 있으나, 수정할 수는 없음

- disabled ; 입력필드 사용 불가

- maxlength ; 최대 길이 설정

- size ; 한 번에 보여줄 수 있는 문자 최대 개수 설정

 

+ 새로 추가된 Input 요소의 type

- number, range, color, date, time, datetime-local, month, week, email, url, tel, search

 

+ 새로 추가된 Input 요소

- datalist ; 미리 정의된 옵션 리스트 명시

- keygen ; 사용자가 인증할 수 있는 안전한 방법 제공

- output ; 계산 결과 바로바로 표시

 

+ 새로 추가된 input 속성

- autocomplete ; 저장된 정보를 바탕으로 자동 완성

- novalidate ; 그 정보가 유효한지 아닌지 검사 ex) url, email

- autofocus ; 페이지 로드 시, 자동으로 포커스 가도록 함

- placeholder ; input요소에 입력되어야 할 값에 대한 힌트 제공

- required ; 반드시 입력되어야 할 필수 input요소 명시

저작자표시 (새창열림)

'WebProgramming > HTML' 카테고리의 다른 글

[HTML] HTML 작성 가이드라인 & 팁  (0) 2022.06.02
[HTML] 전역 속성  (0) 2022.05.24
HTML 글자/단락 태그 + CSS  (0) 2022.05.05
HTML 기본 문법 정리  (0) 2022.04.25
  1. 1. form
  2. 2. input
'WebProgramming/HTML' 카테고리의 다른 글
  • [HTML] HTML 작성 가이드라인 & 팁
  • [HTML] 전역 속성
  • HTML 글자/단락 태그 + CSS
  • HTML 기본 문법 정리
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터의 성장기록1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • lv3
  • BFS
  • dfs
  • 누적합
  • 해커톤
  • 구름톤
  • 1일 1커밋 후기
  • LV2
  • 반복문
  • 카카오 채용연계형 인턴십
  • 1년 회고
  • 구름
  • 개발 is life
  • 스터디 후기
  • Kakao Tech Internship
  • Union-find
  • 개발 일상
  • Retry
  • 함수
  • 개발 회고
  • 카카오
  • KAKAO BLIND

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
HTML 문서에서 입력(form,input)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.