HTML 양식

HTML 양식 및 입력

HTML 양식은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다.

온라인 예

텍스트 필드 만들기(텍스트 필드)
이 예에서는 HTML 페이지에서 텍스트 필드를 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 쓸 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

비밀번호 필드 생성
이 예에서는 HTML 비밀번호 필드를 생성하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

(더 많은 예제는 이 페이지 하단에서 찾을 수 있습니다.)

HTML 양식

양식은 양식 요소를 포함하는 영역입니다.

양식 요소를 사용하면 사용자는 텍스트 영역, 드롭다운 목록, 라디오 버튼, 체크박스 등과 같은 콘텐츠를 양식에 입력할 수 있습니다.

양식 태그 <form>를 사용하여 양식이 설정됩니다.

<form>
.
input 元素
.
</form>

HTML 양식 - 입력 요소

가장 일반적으로 사용되는 양식 태그는 입력 태그(<input>)입니다.

입력 유형은 유형 속성(type)에 의해 정의됩니다. 가장 일반적으로 사용되는 입력 유형은 다음과 같습니다.

텍스트 필드

텍스트 필드는 <input type="text"> 양식에 문자, 숫자 등을 입력합니다.

<form>
First name:
<input type="text" name="firstname"><br>
Last name:
<input type="text" name="lastname">
</form>

브라우저는 다음과 같이 표시됩니다.

참고: 양식 자체는 표시되지 않습니다. 또한 대부분의 브라우저에서 텍스트 필드의 기본 너비는 20자입니다.

비밀번호 필드

비밀번호 필드는 <input type="password"> 태그로 정의됩니다.

<form>
Password:
<input type="password" name="pwd">
</form>

브라우저 표시 효과는 다음과 같습니다.

참고: 비밀번호 필드 문자는 일반 텍스트로 표시되지 않고 별표나 점으로 대체됩니다.

라디오 버튼

<input type="radio"> 태그는 라디오 버튼 옵션의 형식을 정의합니다

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

브라우저 표시 효과는 다음과 같습니다. 다음:

체크박스

<input type="checkbox"> 사용자는 여러 옵션 중에서 선택해야 합니다. 선택.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

브라우저 표시 효과는 다음과 같습니다.

제출 버튼

<input type="submit">은 제출 버튼을 정의합니다.

사용자가 확인 버튼을 클릭하면 양식의 내용이 다른 파일로 옮겨졌습니다. 양식의 작업 속성은 대상 파일의 파일 이름을 정의합니다. action 속성으로 정의된 파일은 일반적으로 수신된 입력 데이터에 대해 관련 처리를 수행합니다. :

<form name="input" action="html_form_action.php" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

브라우저 표시 효과는 다음과 같습니다.

위 텍스트 상자에 몇 글자를 입력한 후 확인 버튼을 클릭하면 입력 데이터가 "html_form_action.php" 페이지로 전송되었습니다. 이 페이지에는 입력 결과가 표시됩니다.

추가 예제

라디오 버튼
이 예제는 HTML에서 라디오 버튼을 만드는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

체크박스
이 예는 HTML 페이지에서 체크박스를 만드는 방법을 보여줍니다. 사용자는 확인란을 선택하거나 선택 취소할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

간단한 드롭다운 목록
이 예에서는 HTML 페이지에서 간단한 드롭다운 목록 상자를 만드는 방법을 보여줍니다. 드롭다운 목록 상자는 선택 가능한 목록입니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

미리 선택된 드롭다운 목록
이 예에서는 미리 선택된 값으로 간단한 드롭다운 목록을 만드는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

텍스트 영역
이 예는 텍스트 영역(여러 줄 텍스트 입력 컨트롤)을 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 쓸 수 있습니다. 쓸 수 있는 문자 수에는 제한이 없습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

버튼 생성
이 예에서는 버튼을 생성하는 방법을 보여줍니다. 버튼의 텍스트를 사용자 정의할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

양식 예

테두리 양식
이 예는 데이터 주위에 제목이 있는 상자를 그리는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

입력 상자와 확인 버튼이 있는 양식
이 예에서는 페이지에 양식을 추가하는 방법을 보여줍니다. 이 양식에는 두 개의 입력 상자와 확인 버튼이 포함되어 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

체크박스가 있는 양식
이 양식에는 체크박스 2개와 확인 버튼이 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

라디오 버튼이 있는 양식
이 양식에는 두 개의 라디오 버튼과 한 개의 확인 버튼이 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

양식에서 이메일 보내기
이 예에서는 양식에서 이메일을 보내는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

HTML 양식 태그

신규 : HTML5 새 태그

< th align="left">태그< td>계산 결과 정의

설명

<form>

사용자 입력을 위한 양식 정의

<input>

입력 필드 정의

텍스트 영역 정의(여러 줄 입력 컨트롤) )

<label>

<input> 요소의 레이블(일반적으로 입력 제목)을 정의합니다.

관련 양식 요소 그룹을 정의하고 외부 프레임을 사용하여 이를 묶습니다.

드롭다운 옵션 목록 정의

옵션 정의 그룹

드롭다운 목록에서 옵션 정의

< a href="http://www.php.cn/dic/html/button.html" target="_blank"><버튼>

클릭 버튼 정의

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

사전 정의된 입력 제어 옵션 목록 지정

<keygen> ;

양식의 키 쌍 생성 필드 정의

<🎜>

← HTML 레이아웃

HTML 프레임 →

HTML 양식

HTML 양식 및 입력

인스턴스

인스턴스

HTML 양식

HTML 양식 - 입력 요소

텍스트 필드

비밀번호 필드

라디오 버튼

체크박스

제출 버튼

추가 예제

인스턴스

인스턴스

인스턴스

인스턴스

인스턴스

인스턴스

양식 예

인스턴스

인스턴스

인스턴스

인스턴스

인스턴스

HTML 양식 태그

PHP 중국어 웹사이트