HTML - Hyper Text Markup Language(3)

[로그인창 제작]

로그인 -> 서버에 정보 전송

<form> - 서버에 정보를 전송하거나 글자를 입력하는 것들을 작성할 때 사용

<form action="링크"> - 해당 링크로 정보를 보내고 연결시켜줌

<input> - 사용자가 무언가를 입력할 수 있는 box 생성, text 옵션을 통해 여러가지 설정 가능

<input type="text"> - 문장을 입력할 수 있는 box 생성

<input type="password"> - 입력시 보안을 위해 번호가 가려지는 box 생성

<input type="submit"> - [제출] 이라는 버튼 생성

<html>
    <body>
        <form action="http://localhost/login.php">
            <p>아이디 : <input type="text" name="id" value="id입력"></p>
            <p>비밀번호 : <input type="password" name="pwd"></p>
            <input type="submit">
        </form>
    </body>
</html>

(name="옵션" name 을 사용해줌으로써 해당 데이터를 name의 값으로 전송해서 서버쪽에서 구분할 수 있게 해줌)

(value="문장" 옵션을 사용해줌으로써 해당 box 에 기본적으로 생성되어있는 문장을 새길 수 있음)

결과

(연결된 링크에 아무것도 없기 때문에 현재는 페이지 오류 반환, 링크 내용에 name으로 설정된 id와 pwd 를 통해 입력한 값을 확인할 수 있음)

[여러줄을 입력하기]

<textarea></textarea> - 위의 <input> box 는 한 줄만 입력 가능하나 <textarea> box 는 여러 줄 입력이 가능

<body>
    <p>글 입력: <textarea></textarea></p>
</body>

결과

글 입력:

(옵션을통해 box 크기 조절등을 할 수 있음)

<textarea> 의 기본값 설정은 <input> 태그의 value 옵션과 다르게 태그 내부에다가 설정함(사실상 문구 입력)

<body>
    <p>글 입력: <textarea cols="10" rows="3">글을 입력하세요.</textarea></p>
</body>

결과

글 입력: 글을 입력하세요.

[Dropdown list - 선택지 생성하기]

<select></select> - 태그와

<option></option> - 태그를 활용해서 선택 리스트 생성

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/alcoholic.php">
            <h1>주류</h1>
            <select name="alcoholic_beverages">
                <option value="wine">와인</option>
                <option value="beer">맥주</option>
                <option value="whiskey">위스키</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

<form> 을 통해 submit 버튼 클릭시 데이터 전송 가능하게 링크 설정해준다.
<select> 태그 또한 name 을 통해 값의 이름을 설정할 수 있다.

<option> 옵션 없이 사용할 결우 태그에 설정된 "문장"(여기선 와인, 맥주, 위스키) 의 이름으로 전송되는데

value 옵션을 통해서 컴퓨터가 읽기 쉽게 바꿔 줄 수 있다.(여기선 wine, beer, whiskey )

결과

위 리스트에서 위스키를 클릭하고 제출하면

링크 상단에 name과 value에 설정된 alcoholic_beverages와 whiskey 가 확인된다.

[다중선택지 생성하기]

<select> 태그에다가 multiple 옵션을 추가해주면 된다.

(위 내용에 비교가능하게 추가해서 구현)

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/alcoholic.php">
            <h1>주류</h1>
            <select name="alcoholic_beverages">
                <option value="wine">와인</option>
                <option value="beer">맥주</option>
                <option value="whiskey">위스키</option>
            </select>
            <h1>주류-중복선택</h1>
            <select name="alcoholic beverages 2" multiple>
                <option value="wine">와인</option>
                <option value="beer">맥주</option>
                <option value="whiskey">위스키</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

결과

(위의 다중 선택은 키보드의 ctrl 을 같이 활용해야 여러 항목을 선택되는 기능으로 다소 불편한 점이 있다.)

[라디오 버튼 생성하기]

<input> 의 type 옵션으로 radio 를 설정해준다.

(라디오가 버튼 하나 누를 때 다른 버튼이 취소되는 매커니즘을 모방한것으로 radio 옵션으로 설정된 <input> 태그들을 name 으로 동일한 값 설정해서 묶음 처리해주면 해당 매커니즘을 활용할 수 있다. name 옵션이 없으면 버튼이 개별적으로 활성화되고, name 을 다른 값으로 설정해주면 같은 값끼리만 연동이 된다.)

name 설정이 없는 경우의 버튼

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <input type="radio">
        <input type="radio">
        <input type="radio">
    </body>
</html>

결과

(버튼이 개별적으로 활성화 됨)

name 설정을 해준 경우

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>
            빨강 <input type="radio" name="color">
            파랑 <input type="radio" name="color">
            노랑 <input type="radio" name="color">
        </p>
    </body>
</html>

결과

빨강 파랑 노랑

(버튼이 연동되어서 하나 클릭시 하나 취소됨)

name 설정을 다르게 묶을 경우

<html>
    <head>
    	<meta charset="utf-8">
    </head>
    <body>
        <p>
            빨강 <input type="radio" name="color">
            파랑 <input type="radio" name="color">
            노랑 <input type="radio" name="color">
        </P>
        <p>
            햄버거 <input type="radio" name="food">
            삼겹살 <input type="radio" name="food">
            돈까스 <input type="radio" name="food">
        </P>
    </body>
</html>

결과

(color 설정 된 버튼 묶음과 food 설정 된 버튼 묶음이 따로 연동됨)

[체크박스 생성하기]

<input> 태그의 type 옵션으로 checkbox 를 선택해준다.

(같은 이름으로 묶인 옵션들 내에서 여러개를 선택할 수 있게 해준다.)

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>
            빨강 <input type="radio" name="color">
            파랑 <input type="radio" name="color">
            노랑 <input type="radio" name="color">
        </P>
        <p>
            햄버거 <input type="checkbox" name="food">
            삼겹살 <input type="checkbox" name="food">
            돈까스 <input type="checkbox" name="food">
        </P>
    </body>
</html>

결과

빨강 파랑 노랑

햄버거 삼겹살 돈까스

[선택지에 미리 선택 처리하기]

<input> 태그에 checked 옵션을 입력해두면 체크란에 미리 체크가 되어있는 상태로 적용된다.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>
            빨강 <input type="radio" name="color">
            파랑 <input type="radio" name="color" checked>
            노랑 <input type="radio" name="color">
        </P>
        <p>
            햄버거 <input type="checkbox" name="food">
            삼겹살 <input type="checkbox" name="food">
            돈까스 <input type="checkbox" name="food" checked>
        </P>
    </body>
</html>

결과

빨강 파랑 노랑

햄버거 삼겹살 돈까스

[단순 버튼 생성하기]

<input> 태그의 type 옵션을 button 으로 설정하면 된다.

TMI : button 옵션은 단순히 버튼만 생성하는 것으로 아무런 기능이 없다. 후에 JAVA 등의 기능을 탑재 시킬 수 있다.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<form action = "http://localhost/form.php">
            <input type="button" value="버튼" name="button">
    </body>
</html>

결과

[reset 버튼 생성하기]

<input> 태그의 type 옵션을 reset으로 설정하면 된다.

reset 옵션은 Text 등에서 사용자가 적은 것을 다시 지워주는 버튼이다.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<form action = "http://localhost/form.php">
            <input type="text">
            <input type="submit" value="전송" name="submit">
            <input type="button" value="버튼" name="button">
            <input type="reset">
    </body>
</html>

결과

이상 오늘의 html 3 note 마무리

'HTML' 카테고리의 다른 글

HTML - Hyper Text Markup Language(4) (0)	2024.05.27
HTML - Hyper Text Markup Language(2) (0)	2024.05.25
HTML - Hyper Text Markup Language(1) (0)	2024.05.24

공책

HTML - Hyper Text Markup Language(3)

주류

주류

주류-중복선택

'HTML' 카테고리의 다른 글

티스토리툴바

HTML - Hyper Text Markup Language(3)

주류

주류

주류-중복선택

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바