본문 바로가기

HTML5 & CSS

HTML5&CSS3 기초 4강

<form> 관련 태그

사용자의 정보를 서버로 전달하기 위한 태그

<form>태그 : 데이터 처리 문서의 주소와 데이터 전달 방식을 속성으로 갖는다.

<input>태그 : type 속성을 이용해서 사용자의 다양한 정보를 얻는다.

-디자이너와 퍼블리셔는 폼 관련 태그를 디자인에 중점을 두지만, 웹 프로그래머는 데이터 처리에 중점을 둔다.


form태그는 서버의 url 정보를 가져야한다.

method로 어떻게 전송할 것인지 정하며 GET, POST 방식이 있다.

GET방식은 해당 url 뒤에 정보가 더해져서 날아가기 때문에 보안에 취약하다.

POST방식으로 아이디, 비밀번호 등을 다루며 문서 헤더에서 암호화된다.

<form action = "주소" method = "get">

주소 부분에는 정보가 보내질 타겟 url이 들어간다. method 부분에 전송방식을 입력한다.


이름

<input type ="text" name="uname">

name부분에는 서버에서 받는 식별값이기 때문에 중복되어서는 안된다.


비밀번호

<input type = "passward" name="ddd">


사진

<input type = "file" name="">


성별

<input type = "radio" name="gender" value="m">남

<input type= " radio" name="gender" value="w">여

둘 중 하나가 선택되는 radio같은 경우에는 name이 같아야하며 실제 값인 value가 다르게 들어가야하며, value는 꼭 영어로만 되어야한다.


사용언어

<input type="checkbox" ~~>

다중선택되는 checkbox도 마찬가지로 name은 같아야한다.


자기소개 

<textarea row="5">

행이 5


국적

<select>

 <option>Korea </option>

 <option>UAS </option>

</select>

박스가 열러서 선택하게 되는 경우

여기다 <select multiple="multiple">로 입력하게 되면 다중선택 가능하다.


완료버튼

<input type="submit">


이미지태그

<img>태그 :  웹 문서에 이미지 삽입 태그

src 속성 : 이미지의 위치정보를 속성값으로 가짐

-이미지의 위치는 로컬뿐만 아니라 다른 서버에 있는 등 외부에 존재가능하다.

<img src="위치정보">


<p> <img src="img/navi.png" alt="꿈 스토리"></p>

alt는 이미지가 없을 경우 엑박 옆에 내용을 표시하는 것.

장애가 있는 사람들을 위한 웹에는 그림을 소리화 하는 기능이 있는데 이럴경우 alt가 필요하다.

<p> <a href="~" target=_blank"> <img src="~" alt="꿈 스토리"></a> </p>

이미지를 누르면 링크이동


'HTML5 & CSS' 카테고리의 다른 글

HTML5&CSS3 기초 4강  (0) 2016.05.19
HTML5&CSS3 기초 3강  (0) 2016.05.18
HTML5&CSS3 기초 2강  (0) 2016.05.18
T아카데미 온라인 교육 HTML5&CSS3 기초 1강  (0) 2016.05.01