어쩌다보니 박준태가 또 조장이조 3차

potatoo 2024. 7. 22. 22:00

728x90

양식 레이블 및 제출

레이블 태그를 통해서 어떤 것이 이메일 입력이고, 어떤것이 비밀번호 입력인지 표시 할 수 있다.

레이블 태그에는 for속성이 있고, 이것을 입력에 대한 ID속성에 연결해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is Title</title>
</head>
<body>
    <form class="" action="">
        <label for="emailtag">EMAIL:</label>
        <input id="emailtag" type="email" name="" value="">
        <label for="passtag">PASSWORD:</label>
        <input id="passtag" type="password" name="" value="">
    </form>
</body>
</html>

for에 emailtag라고 설정하고, 입력 태그 안에서 id속성을 똑같은 이름으로 넣으고, 시작과 종료 태그 사이에 원하는 레이블 명을 넣는다.

그러면 입력태그 앞에 레이블이 붙는다.

입력태그의 타입을 submit으로하고 action 속성을 추가한다.

리다이렉션 방식으로 해당 양식에서 제출을 누르면 이동할 페이지를 지정하는 방식으로 action을 사용한다.

value는 자동으로 입력 태그 안의 값으로 표시된다. value는 사용자 제공값으로 변경된다. value는 예시값이라고 생각한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is Title</title>
</head>
<body>
    <form class="" action="http://www.google.com" method="get">
        <label for="emailtag">EMAIL:</label>
        <input id="emailtag" type="email" name="useremail" value="Email Here">
        <br>
        <label for="passtag">PASSWORD:</label>
        <input id="passtag" type="password" name="" value="">

        <input type="submit" name="" value="Submit">
    </form>
</body>
</html>

name은 파라미터로 전달될 이메일과연결될 이름이다.

양식 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is Title</title>
</head>
<body>
    <FORM method="get">
    <label for="yes">Yes:</label>
    <input type="radio" id="yes" name="dog_choice" value="yes">

    <label for="no">No:</label>
    <input type="radio" id="no" name="dog_choice" value="no">
        
    </FORM>
</body>
</html>

name을 같게 연결하면 하나를 선택하면 다른 하나는 선택이 안되게 된다.

radio버튼으로 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is Title</title>
</head>
<body>
    <FORM method="get">
    <label for="yes">Yes:</label>
    <input type="radio" id="yes" name="dog_choice" value="yes">

    <label for="no">No:</label>
    <input type="radio" id="no" name="dog_choice" value="no">

    <select name="stars">
        <option value="Great">3</option>
        <option value="Good">2</option>
        <option value="Bad">1</option>
    </select>
    
    <textarea name="name" rows="4" cols="30"></textarea>
    </FORM>
</body>
</html>

textarea 태그는 이름 및 행과 열의 수를 지정한다. 행렬의 갯수로 텍스트 영역 상자의 크기를 지정한다.

대부분의 브라우저에서는 사용자가 텍스트 영역의 크기를 조정할 수 있다.

백엔드에서는 name-value 쌍을 처리한다.

Name	Type	Description
Lists	list	Orderd sequence of object: [10,"hello",200.3]
Dictionaries	dict	Unordered Key:Value pairs: {"mykey":"value","name":"Frankie"}
Tuples	tup	Ordered immutable sequence of objects: (10,"hello",200.3)
Sets	set	Unordered collection of unique objects: {"a","b"}

728x90