HTML+CSS 시작하기 쉬운 양식

1: 양식

양식은 <form></form>

양식은 등록 등의 정보를 수집하는 데 사용됩니다. 사용자 이름을 입력해야 합니다. , 비밀번호, 이메일, 휴대폰번호, 인증코드 등 이러한 데이터는 양식을 통해 제출되며 해당 정보는 다른 페이지에서 수신됩니다.

양식 작성 방법은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎学习表单</title>
</head>
<body>
<form></form>
</body>
</html>

이렇게 간단한 형태를 넣었습니다. 작성한 후 다음 속성 매개변수를 살펴보겠습니다.

다음으로 일반적으로 사용되는 몇 가지 속성을 살펴보겠습니다. 양식 태그

1. 액션

2.메소드

3.enctype="multipart/form-data"

액션

action 속성은 양식이 제출될 때 수행할 작업을 정의합니다.

서버에 양식을 제출하는 일반적인 방법은 제출 버튼을 사용하는 것입니다.

일반적으로 양식은 웹 서버의 웹 페이지에 제출됩니다.

다음 코드를 보세요:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎学习表单</title>
</head>
<body>
<form action="login.php">
<!-- 表单元素等 -->
</form>
</body>
</html>

위 코드를 보면 우리의 폼이 login.php에 제출된 것을 알 수 있습니다. login.php 파일에서 폼 정보와 프로세스를 얻을 수 있습니다. , 판단하거나 데이터베이스에 추가하는 등의 작업을 수행합니다.

method

method 속성은 양식을 제출할 때 사용되는 HTTP 메서드(GET 또는 POST)를 지정합니다.

나중에 두 가지에 대해 이야기하겠습니다.

enctype="multipart/form-data"

파일을 업로드할 때 양식에 이 문장을 넣어야 합니다

< ;form action="" method="POST" enctype="multipart/form- data"></form>

양식 요소(강조)

1. 텍스트 상자 id=2>

3. 텍스트 영역 <텍스트 영역 이름=" 콘텐츠"></textarea>

4. 라디오 버튼 <input type="radio" name= "radio" value="radio" />

5. 체크박스 <input type="checkbox" name="checkbox" value="checkbox" />

6 . 드롭다운 상자 재설정: 재설정 제출: 버튼

다음으로 다음 코드와 같이 이러한 양식 요소를 인스턴스에 통합합니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>欢迎学习表单</title>
</head>
<body>
		<form action="login.php" method="post" enctype="multipart/form- data">
			姓名：<input type="text" name="name" id=1><br><br>

				  <input type="hidden" name="hidd">  <!--隐藏域默认是不显示的-->

			简介：<textarea name="text" rows="10" cols=""></textarea> <br><br> 
			<!--rows是要写多少行     cols每行要写多少个字符-->

			国籍：<input type="radio" name="radio" value="radio" checked/>中国
				  <input type="radio" name="radio" value="radio" />美国
				  <input type="radio" name="radio" value="radio" />日本
			<!--注：当使用单选按钮时，必须要有一个相同的name属性-->

			<br><br>

			爱好：<input type="checkbox" name="checkbox" value="checkbox" checked/>篮球
				  <input type="checkbox" name="checkbox" value="checkbox" />足球
				  <input type="checkbox" name="checkbox" value="checkbox" />音乐
			<br><br>


			来自： <select>
						<option selected>安徽</option>
						<option>上海</option>
						<option>北京</option>
						<option>浙江</option>
				   </select>

			<br><br>
			
			<input type="file">            <!--上传文件-->
			
			
                        <br><br>
			<input type="submit" value="提交">	   
			<input type="reset" value="重置">
			<input type="button" value="添加">

		</form>
</body>
</html>

단일 선택 및 다중 선택은 기본 선택이 선택되어 있습니다. 입력에

를 직접 쓰거나 chechked="checked"

드롭다운 상자에 쓸 수 있습니다. , 기본 선택이 선택됨

버튼

재설정 양식에 정보가 있는 경우 클릭하면 내용이 지워집니다.

제출과 버튼의 차이점

제출 버튼을 클릭하면 양식이 페이지에 제출됩니다.

이벤트가 실행될 때 버튼을 이벤트에 바인딩해야 합니다.

POST 및 GET 제출 방법

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>post</title>
</head>
<body>
  <form action="index.php" method="post">
   姓名：<input type="text" name="name"><br><br>
   密码：<input type="password" name="pwd"><br><br>
   <input type="submit" value="登录">
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>post</title>
</head>
<body>
  <form action="index.php" method="get">
   姓名：<input type="text" name="name"><br><br>
   密码：<input type="password" name="pwd"><br><br>
   <input type="submit" value="登录">
  </form>
</body>
</html>

get을 사용하면 양식으로 제출된 내용이 주소 표시줄에 표시되고 post 방법을 사용하면 표시되지 않습니다.

일반적으로 대부분의 폼 제출은 post 방식을 사용하므로 보안이 높습니다

1. Post가 데이터를 전송할 때 데이터를 표시할 필요가 없습니다. URL이지만 Get 메서드는 URL에 표시되어야 합니다.
2.Post는 2M에 달하는 대용량 데이터를 전송하는 반면, Get 메소드는 URL 길이 제한으로 인해 약 1024바이트만 전송할 수 있습니다.
3.Post는 이름에서 알 수 있듯이 전송하는 것입니다. Get은 서버 세그먼트에서 데이터를 얻기 위한 것입니다. Get도 데이터를 전송할 수 있는 이유는 Post 정보가 http 요청의 내용으로 사용된다는 것을 서버에 알려주기 위한 것입니다. Get은 Http 헤더에 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎学习表单</title> </head> <body> <form action="login.php" method="post"> 姓名：<input type="text" name="name" id=1><br><br> <input type="hidden" name="hidd">  简介：<textarea name="text" rows="10" cols=""></textarea> <br><br>  国籍：<input type="radio" name="radio" value="radio" checked/>中国 <input type="radio" name="radio" value="radio" />美国 <input type="radio" name="radio" value="radio" />日本  <br><br> 爱好：<input type="checkbox" name="checkbox" value="checkbox" checked/>篮球 <input type="checkbox" name="checkbox" value="checkbox" />足球 <input type="checkbox" name="checkbox" value="checkbox" />音乐 <br><br> 来自： <select> <option selected>安徽</option> <option>上海</option> <option>北京</option> <option>浙江</option> </select> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="添加"> </form> </body> </html>

제출하다 코드 재설정

자동운전