[TIL] 03 -HTML Tag (form & input)
TAG
tag는 Element라고 불리우며 그리고 <></>
안에 있는 것을 content라고 한다.
웹페이지의 내용과 구조에 맞게 태그가 갖고 있는 의미와 역할을 고려에 사용해야한다.
Attributes (속성)
tag의 시작태그인 <>
안에 들어가는 것으로
id
, class
를 넣어 고유명사로 혹은 태그들을 묶어서 사용하고 다른 속성으론
src
은 이미지 경로, alt
은 이미지 설명, stlye
은 글자의 속성,
type
은 텍스트인지 이미지인지, 혹은 버튼의 종류를 나타내기도 한다.
많이 쓰는 Tag의 종류
div
: 아무의미는 없지만 속성이 한줄로 되어있는 태그
span
: 역시 아무의미 없지만 content의 영역이 곧 자신의 영역인 태그
ul
, li
, a
ul
: 번호가 붙지 않는 리스트 목록 태그
li
: 리스트 태그
a
: 리스트 속 다른 페이지 링크나 같은 페이지에서의 이동가능한 태그
br
: 띄워쓰기 태그
h1~h6
: 글자 크기를 정해져있는 속성으로 지정해주며 보통 제목이나 부제목으로 쓰는 태그
form
: 입력 양식 전체를 감싸는 태그
input
: 사용자에게 받아오는 데이터 태그
(한 페이지안에 너무나 많이 사용되기 때문에 id를 통해서 고유한 식별자를 줘야 한다.)
form
태그
tag는 Element라고 불리우며 그리고 <></>
안에 있는 것을 content라고 한다.
웹페이지의 내용과 구조에 맞게 태그가 갖고 있는 의미와 역할을 고려에 사용해야한다.
tag의 시작태그인 <>
안에 들어가는 것으로
id
, class
를 넣어 고유명사로 혹은 태그들을 묶어서 사용하고 다른 속성으론
src
은 이미지 경로, alt
은 이미지 설명, stlye
은 글자의 속성,
type
은 텍스트인지 이미지인지, 혹은 버튼의 종류를 나타내기도 한다.
div
: 아무의미는 없지만 속성이 한줄로 되어있는 태그span
: 역시 아무의미 없지만 content의 영역이 곧 자신의 영역인 태그ul
,li
,a
ul
: 번호가 붙지 않는 리스트 목록 태그li
: 리스트 태그a
: 리스트 속 다른 페이지 링크나 같은 페이지에서의 이동가능한 태그
br
: 띄워쓰기 태그h1~h6
: 글자 크기를 정해져있는 속성으로 지정해주며 보통 제목이나 부제목으로 쓰는 태그form
: 입력 양식 전체를 감싸는 태그input
: 사용자에게 받아오는 데이터 태그
(한 페이지안에 너무나 많이 사용되기 때문에 id를 통해서 고유한 식별자를 줘야 한다.)
form
태그form
안에는 input
, textareat
, select
, label
등이 있다.
form
의 attributes값은
name
: 서버로 보내질 때의form
의 데이터 이름 값action
:form
의 데이터 서버가 보내지는 url와 html 값method
: 서버로 데이터를 통신하는 방법 (get과 post가 있음)
- get은 기본 값이며, 항상 노출이 된다, URL 최대 256자까지,되도록 영문과 숫자 정도만 전송
- post는 데이터를 url에 숨겨서 전송하는 방법, 데이터 노출이 없음(보안상 조금 더 안전), 무제한, 한글 상관없이 전송
autocomplete
: 자동 완성. on으로 하면 form 전체에 자동 완성 허용target
:action
에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
input
태그
각 특징과 역할이 있는 태그로써 attributest 값인 name
, type
이 있는데
name
은 서버로 전송되는 태그 이름 값
type
은 입력 형식으로 text
, password
, button
, submit
, reset
, radio
, checkbox
, hidden
, file
등이 있다.
text
태그
text
의 기본 형식
<input type = 'text' name = '' value = '' placeholder = ''>
<input type = 'text' name = 'id' value = '' placeholder = '안녕'> name => 태그의 이름 value => 기본으로 적혀있는 값, 지우고 새로운 내용 적어도 됨 placeholder => 커서를 누르기 전에 보여지는 값
=> 결과 값
password
태그
password
의 기본 형식
<input type = 'password' name = '' value = '' placeholder = ''>
<input type = 'password' name = 'pwd' value = '' placeholder = 'password'> name => 태그의 이름 vlaue => 기본으로 주는 값, password라 기본값도 문자가 아닌 '·'으로보임 placeholder => 커서를 누르기 전에 보여지는 값
=> 결과 값
button
태그
button
의 기본 형식
<input type = 'button' name = '' value = '' onclick = ''>
<input type = 'button' name = 'bt' value='button' onclick='alert("hello world")'> name => 태그의 이름 vlaue => 기본으로 주는 값 onclick = 'alert()' => 클릭해서 나타나는 창
=> 결과 값
submit
태그
submit
의 기본 형식
<input type = 'submit' name = '' value = '' onclick = ''>
<input type = 'submit' name = 'sub' value='제출하기' onclick='alert('hello world')'> name => 태그의 이름 vlaue => 기본으로 주는 값 onclick = 'alert()' => 클릭해서 나타나는 창
=> 결과 값
radio
태그 (단일선택 태그)
radio
의 기본 형식
<input type = 'radio' name = '' value = '' onclick = ''>
<br><input type="radio" name="color" value="red"> 빨간색 <br><input type="radio" name="color" value="green"> 초록색 name => 태그의 이름 vlaue => 가지고 있는 데이터 값
=> 결과 값
빨간색
초록색
checkbox
태그 (다중선택 태그)
checkbox
의 기본 형식
<input type = 'radio' name = '' value = '' onclick = ''>
<br><input type="checkbox" name="color" value="red"> red <br><input type="checkbox" name="color" value="green"> green <br><input type="checkbox" name="color" value="blue" checkd> blue name => 태그의 이름 vlaue => 가지고 있는 데이터 값 chedck => 절대로 체크되어 있게 설정
=> 결과 값
red
green
blue
Q&A
input type = 'button' vs input type = 'submit'
button
은 보통JS
를 이용하여 다양한 역할을 하게 하지만submit
은 말 그래도 제출하다라는 뜻으로 데이터 값을 어디로 보내는 역할을 한다.
input type="submit" vs button
button
의type
기본 값이submit
이기 때문에 기능적으로 동일하지만button
이CSS
적인 부분에서 월등하다고 말하고 있다.
<button>
과</button>
사이에 다른 태그들을 삽입할 수도 있다.
Author And Source
이 문제에 관하여([TIL] 03 -HTML Tag (form & input)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jyujung2/TIL-03-HTML-Tag-form-input저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)