HTML 형식의 기본 요소-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 형식의 기본 요소

无忌哥哥

Jun 29, 2018 am 10:22 AM

양식의 기본 요소

1. 먼저 양식이 무엇인지 살펴보겠습니다. 거의 모든 웹사이트에 양식이 있습니다.

2. 양식의 가장 직접적인 인상은 입력 상자와 버튼이 있다는 것입니다

3 . 이러한 입력 상자는 사용자가 입력한 데이터를 수용할 수 있고, 버튼은 사용자의 데이터를 제출할 수 있습니다

4. 양식 요소는 일련의 태그로 구성됩니다

양식을 제출하는 방법에는 여러 가지가 있으며, 가장 중요한 것은 두 가지입니다:

1.get 방법: 이 방법도 기본 방법입니다. 사용자가 제출한 모든 양식 데이터는 URL 주소에 있습니다

장점은 반복적으로 수집하고 호출하기 쉽다는 점이지만 단점은 안전하지 않으며 데이터 양이 제한되어 있습니다

2. 게시 방법: 요청 헤더를 통해 데이터가 제출되며 URL 주소 표시줄이 보이지 않으며 매우 안전하며 길이 제한이 없습니다

get 방법이 매우 민감하지 않고 길이가 짧은 데이터 전송에 적합

포스트 방식은 중요한 데이터와 길이가 불확실한 데이터 전송에 매우 적합합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-1表单的基本元素</title>
</head>
<body>
<form action="demo.php" method="get">
<!-- <form action="demo.php" method="post"> -->
<!-- 最重要的输入控件标签是<input>,它有很多类型,是由type属性来指定的 -->
<!-- 1.文本框: 最常见,可以输入文本,常用来输入用户名帐号等 -->
<!-- 因为input是一个内联元素,多个input会在一行显示,所以后面加一个换行标签 -->
<!-- name是输入控件的名称,一定要设置,因为PHP要用它当变量名来获取表单的数据
value保存的是用户输入的数据,通常保持为空即可 -->
姓名:<input type="text" name="name" value=""> <br>
<!-- 2.密码框: type="password",和文本是一样的,只是用户输入的内容以星号代替 -->
密码:<input type="password" name="password" value=""> <br>
<!-- 3.单选框:顾名思义就是每次只能选择一项,例如性别,付款方式等只能选择一个且选项较少的情况 -->
<!-- 单选按钮的name值必须全部一样,才能确保仅返回一个选择 -->
<!-- 可以设置默认选择荐:checked:它是布尔属性,不需要赋值,如果要给值就是它自己 -->
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="woman">女
<input type="radio" name="sex" value="secret" checked>保密
<br>
<!-- 4.复选框:就是一次可以选择多个数据提交,返回值是一个数组,name属性要加[],确保返回数组 -->
爱好:<input type="checkbox" name="hobby[]" value="movie">看电影
   <input type="checkbox" name="hobby[]" value="game" checked>打游戏
   <input type="checkbox" name="hobby[]" value="cook">做饭
   <input type="checkbox" name="hobby[]" value="wash">洗衣服
   <br>
<!-- 5:下拉列表框:点击后会出一个下拉列表,用户可以选择一个或多个选项 -->
<!-- 下拉列表使用的是select标签,名值对name和value分在二个标签中 -->
<!-- name写在父标签select中,value写在option子标签中,可以用selected属性设置默认值 -->
级别: <select name="level">
<option value="0">纯洁的小白</option>
<option value="1">有点污啦</option>
<option value="2" selected>目空一切</option>
<option value="3">宇宙无敌小霸王</option>
</select>
<br>
<!-- 6.文件上传域:accept属性设置允许上传的文件类型,不过这个很少用,应该在服务器进行判断 -->
头像:<input type="file" name="photo" accept="image/*"> <br>
<!-- 特殊的隐藏域:type="hidden",为什么要用隐藏域呢?
1.有一些数据是自动生成的,不需要用户输入:例如注册时间
2.有一些数据用户是不知道的,例如,用户id
3.后端通过表单向一些页面传数据时使用的主键或关键字 -->
<!-- 在页面看不到隐藏域的东西,但是提交后可以在后台看到通过隐藏域传递过来的数据 -->
<input type="hidden" name="user_id" value="10">
文本域:<textarea name="comment" rows="5" cols="30"></textarea><br>
<!-- 7.提交按钮:type="submit",type="button"是普通按钮,失去提交功能 -->
<input type="submit" name="submit" value="提交">
<input type="button" name="button" value="提交">
<!-- type="reset"可以重置用户数据,恢复到最初状态 -->
<input type="reset" name="reset" value="重置">
<!-- 8.提交图像按钮: type="image",默认就是提交功能,与submit功能是一样的 -->
<input type="image" name="submit" src="../images/submit.jpg" width="30">
</form>
</body>
</html>

로그인 후 복사

위 내용은 HTML 형식의 기본 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1665

Cakephp 튜토리얼

1424

라라벨 튜토리얼

1322

PHP 튜토리얼

1270

C# 튜토리얼

1249

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다