코드 여행 일기

주요 태그 3 <입력 양식 4> 본문

HTML

주요 태그 3 <입력 양식 4>

할짝개발자 2023. 7. 24. 05:05
728x90
반응형

 

 

컨트롤의 제목 - label

 

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="">
        <p>
			<label for = "id_txt">text :</label>  
            <input id = "id_txt" type="text" name="id" value="default value">
		</p>
        <p>
			<label for = "password">password :</label> 
            <input id = "password" type="password" name="pwd" value="default value">
		</p>
        <p>
			<label>textarea :
            <textarea cols="50" rows="2">아무 글이나 입력하시오</textarea>
	        </label>
        </p>
        <p>
            <label>
    	        <input type="checkbox" name="color" value="red">붉은색
            </label>
            <label for="color_blue">
 	           <input id="color_blue" type="checkbox" name="color" value="blue">파란색
            </label>
        </p>
    </form>
</body>
</html>

<label> 무엇의 이름 인지를 달아주는 역할

 

2가지 방법이 있음

코드는 다르나 둘 다 똑같이 작동을 한다.
빨간 박스 어느 곳을 클릭하던
텍스트 창은 입력 창에 체크 박스는 체크가 된다

 

결과

 

 

 

method

 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="<http://localhost/method.php>" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

method="post" url에 데이터를 숨겨서 전송할때 사용한다.

 

method 옵션을 사용 안할시 method = &ldquo;get&rdquo; 이 자동으로 적용된다.

 

결과

 

method="get" 코드 적용했을시
method="post" 코드 적용했을시

 

 

파일 업로드

 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="<http://localhost/upload.php>" method="post" enctype="multipart/form-data">
            <input type="file" name="profile">
            <input type="submit">
        </form>
    </body>
</html>

파일을 업로드하고 저장하는 코드

 

 

위 글은 생활코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'HTML' 카테고리의 다른 글

HTML 기초 1 <strong> <h1> <a>  (0) 2024.01.14
meta  (0) 2023.07.24
주요 태그 3 <입력 양식 3>  (0) 2023.07.24
주요 태그 3 <입력 양식 2>  (0) 2023.07.24
주요 태그 3 <입력 양식 1>  (0) 2023.07.15
'HTML' Related Articles more