MLP) [HTML] HTML 기초(2)

채개바라 2024. 1. 16. 17:00

2024. 1. 16. 17:00

<form> 태그

<form> 태그는 사용자 정보나 의견을 입력하는 큰 틀을 만드는 데 사용된다.
입력된 데이터를 서버로 전달하며 전송된 데이터는 웹 서버에서 처리하여 결과에 따른 또 다른 웹 페이지를 보여준다.
입력 양식 전체를 감싸는 태그이다.

<form> 태그의 속성

name: form의 이름. 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용됨
action: 서버 페이지를 기술. form을 전송할 서버 쪽의 script 파일을 지정
전송되는 서버 url 또는 html 링크
method: 전송 방식을 기술 (get[default], post, delete, put, options)

get 방식: 파라미터가 주소창에 나오는 방식. 보안성이 없고 256~4096Byte까지의 데이터로 용량이 제한됨

※ 파라미터: 클라이언트(유저)에서 요청시 넘어가는 데이터
name(이름)과 값(value)으로 구성되어 있음
"?파라미터 이름 = 파라미터 값"

get 방식: 사용자가 입력한 userid와 userpw가 url에 노출되는 것을 확인할 수 있다.

post 방식: http 프로토콜의 body에 파라미터가 넘어가는 방식. 사람의 눈에 보이지 않아 보안성이 유지되므로 주로 로그인 페이지, 회원가입 페이지, 글 작성 페이지, 파일 업로드 페이지 등에 사용됨. 입력 내용의 길이의 제한을 받지 않음

post 방식: 데이터를 감춰서 보내므로 url에 개인정보가 노출되지 않는다.

<form action="login.jsp" method="post" name="login">
    <label>아이디</label>
    <input type="text" name="userid">
    <br><br>
    <label>비밀번호</label>
    <input type="password" name="userpw">
    <br><br>
    <input type = "submit" value="로그인"> <!-- 서버에 전송하는 기능을 갖는 버튼 -->
    <input type = "reset" value="다시쓰기"> <!-- 초기화 기능을 갖는 버튼 -->
    <input type ="button" value="일반버튼" 
    onclick="alert('안녕')"> <!-- 개발자들이 추가적인 기능을 넣고 싶을 때 쓰는 버튼 -->
</form>

<input> 태그

<input> 태그의 특징

<input> 태그는 <form> 태그 내에서 사용되는 경우가 많으며, 웹사이트에서 입력 받는 거의 모든 종류를 다룬다.
form 태그 안에 있어야 입력된 데이터를 서버로 전송할 수 있다.
서버로 전송되는 데이터: name속성(=key), value속성(=value) --> key=value 형태로 전송됨
input 태그는 type 속성을 이용하여 다룬다.

※ name = value 형태로 전송됨

성별:
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F" checked>여자

input type의 종류

1. input type = "text", input type = "password"

<label>아이디</label>
<input type="text" name="userid">
<br><br>
<label>비밀번호</label>
<input type="password" name="userpw">
<br><br>

2. input type = "radio"

성별:
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F" checked>여자

radio 버튼: 단일선택(동일한 name일 때 단일선택 가능 - name이 같으면 단일선택, name이 다르면 다중선택)

checked: 디폴트로 체크

3. input type = "checkbox"

취미:
<input type="checkbox" name="hobby" id="hobby1" value="reading" checked>독서 
<input type="checkbox" name="hobby" id="hobby2" value="music">음악감상
<input type="checkbox" name="hobby" id="hobby3" value="movie">영화감상

checkbox: 다중선택

checked: 디폴트로 체크

※ name은 서버(백엔드), id는 자바스크립트(프론트엔드)에서 필요하다. id는 중복되면 안된다.

4. input type = "submit", input type = "reset", input type = "button"

<input type = "submit" value="로그인"> <!-- 서버에 전송하는 기능을 갖는 버튼 -->
<input type = "reset" value="다시쓰기"> <!-- 초기화 기능을 갖는 버튼 -->
<input type ="button" value="일반버튼" 
onclick="alert('안녕')"> <!-- 개발자들이 추가적인 기능을 넣고 싶을 때 쓰는 버튼 -->

<button>로그인</button> <!--input type="submit"과 동일한 버튼-->
<button type="reset">다시쓰기</button> <!--input type="reset"과 동일한 버튼-->
<button type="button">일반버튼</button>

5. select option

드롭다운리스트:
<select name="job"> <!--단일선택-->
    <option value="">::직업을 선택하세요::</option> <!--select가 부모태그, option은 자식태그-->
    <option value="Backend">백엔드 개발자</option>
    <option value="Frontend" selected>프론트엔드 개발자</option>
    <option value="Engineer">시스템 엔지니어</option>
</select>
<br><br>
다중선택리스트: <!--다중선택하려면 multiple속성을 준다-->
<select name="lang" id="lang" multiple size="6">
<!--웹페이지에서 ctrl키 눌러서 다중선택 가능 / size는 옵션이 몇개 펼쳐질지 정하는 것-->
    <option value="">::사용 가능한 언어::</option>
    <option value="HTML">HTML</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Java">Java</option>
    <option value="C">C</option>
</select>

6. input type = "file"

<form name="frm" id="frm" action="signup.jsp" 
method = "post" enctype="multipart/form-data">
    사진:
    <input type="file" name="photo"> <!--파일을 업로드하려면 form태그의 method는 post로 지정하고,
    enctype(인코딩타입)="multipart/form-data"로 지정해야 한다.
    이렇게 지정을 안하면 파일 이름만 전달이 되고 파일이 전달되지 않음
    -->
</form>

※ enctype = "multipart/form-data"

enctype은 인코딩 타입이며, 영어 알파벳 이외의 문자들도 있을 이진파일을 POST로 보내기 위해서는 multipart/form-data를 이용해야 한다.

7. textarea

자기소개:
<textarea name="intro" placeholder="자기소개를 100자 이내로 적어주세요"
rows="7" cols="40"></textarea>

※ textarea 크기 설정: rows가 세로, cols가 가로 크기

<textarea> 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용하는 것으로, 텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있다.

8. input type = "hidden"

히든필드:
<input type="hidden" name="secret" value="TopSecret">

사용자는 화면의 폼에서 볼 수 없지만, 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소

사용자가 변경해서는 안되는 데이터를 함께 보낸다.

예를들어 회원가입시 사용자의 ip를 받는 경우 히든필드에 넣어 서버에 전송할 수 있다.

※ <input> 태그의 속성

1. placeholder

입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시한다.

<input placeholder="text">

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

2. readonly

<input> 요소의 입력 필드가 읽기 전용임을 명시한다.

읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있다.

<input readonly>

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

<label> 태그

폼의 양식에 이름을 붙이는 태그
주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다.

<label for="요소 id">

<label>과 <input> 태그 연결하기

<label> 태그에는 for를, <input> 태그에는 id를 사용해 그 값을 똑같이 입력해주면, 체크박스를 클릭해 체크해도 되고 텍스트를 클릭해도 동작하게 되므로 사용자 입장에서는 훨씬 사용이 수월해진다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="test1">여기를 클릭해보세요</label>
        <input id="test1" type="checkbox">
    </div>
</body>
</html>

실행 결과

label for="test1", input id="test1"으로, label의 for값과 양식의 id 값이 같아 둘이 연결된다.

"여기를 클릭해보세요" 텍스트(라벨)를 눌러도 체크박스가 체크되고, 체크박스를 직접 눌러도 체크박스가 체크된다.

fieldset과 legend

form 안에 여러 구역을 나눠 표시할 때 사용된다.
form 내부에서 관계된 요소들끼리 얇은 테두리의 박스로 묶어 그룹화한다.
주로 해당 그룹의 이름을 정할 수 있는 <legend> 태그와 같이 사용한다.

fieldset의 이름(제목)을 달아주는 역할을 한다.

    <form action="join.jsp">
        <fieldset>
            <legend>::회원 가입::</legend>
        <label for="myemail">이메일</label>
        <input type="email" name="email" id="myemail" multiple size="60"> <!--이메일 형식이 아니면 에러 출력
            multiple: 이메일 주소 여러개 입력 (,로 여러개 입력)-->
        <br><br>
        <label for="homepage">홈페이지</label>
        <input type="url" name="homepage" id="homepage" size="60"> <!--url 형식이 아니면 에러 출력-->
        <br><br>
        <input type="date" name="birth" id="birth"
        min="2024-01-01" max="2024-03-31">
        <br><br>
        <input type="time" name="birthtime" id="birthtime">
        <br><br>
        <input type="number" name="age" id="age"
        min="1" max="130" step="5"> <!--step=5: 5씩 증가-->
        <br><br>
        <input type="color" name="cr" id="cr" value="#ff0000"> <!--RGB값: 0~255 
            16진수: 0~15표현, 0~9는 아라비아 숫자, 10부터는 알파벳으로 표현(10: a,11: b,12: c,13: d,14: e, 15: f)
        red값:ff, green값:00, blue값:00 -->
        <br><br>
        <input type="range" name="rgb" id="rgb"
        min="0" max="255" value="50">
        <br><br>
        <button>회원가입</button>
        </fieldset>
    </form>

Entity Code

엔티티 코드란?

HTML 문서에서 특수문자를 입력할 때 코드로 인식되지 않게 하기 위해 엔티티코드 또는 넘버로 입력해줘야한다.

그냥 특수문자로 입력했을 때 HTML 코드로 인식하여 문제가 발생할 수도 있기 때문이다.

<p>
    멀티잇&nbsp;&nbsp;&nbsp;&nbsp;백엔드&nbsp;&nbsp;&nbsp;&nbsp;개발자&nbsp;&nbsp;&nbsp;&nbsp;과정
    <br><br>
    &lt;br&gt;
    <br>
    &quot; 저작권: &copy; copyright reserved multicampus &quot;
</p>
    <!-- 공백문자 &nbsp;
    <: &lt; (less than)
    >: &gt; (greater than)
    &: &amp;
    ": &quot;
    저작권(ⓒ): &copy;
    -->

저작자표시 비영리 변경금지

StartCode