집 > 기사 > 웹 프론트엔드 > HTML5의 form 태그 사용법에 대한 자세한 설명

HTML5의 form 태그 사용법에 대한 자세한 설명

小云云원래의: 2018-03-05 14:50:032527검색

이 글은 주로 HTML5의 form 태그 사용법에 대한 자세한 설명을 공유합니다. 코드 예제를 통해 form 태그 사용법을 공유하겠습니다.

문법:

마지막에는 양식이 그 사이에 배치되어야 합니다. ...

form

method
="post" action= "save.php"> label>
<input type="text" name="username" />
<label for="pass">密码:label >
<input type="password" name="pass" />
form>

텍스트 입력 상자, 비밀번호 입력 상자

사용자가 문자, 데이터 등을 입력해야 할 때 사용됩니다. 텍스트 입력 상자 형식, 텍스트 입력 상자도 비밀번호 입력 상자로 변환할 수 있습니다.

구문:

<form>
< inputtype = "텍스트/비밀번호"name = "이름"값 = "텍스트" />
form>

유형이 텍스트인 경우 텍스트 입력 상자입니다.

유형이 비밀번호인 경우 비밀번호 입력 상자입니다.

2.name: 백엔드 asp php 사용을 위한 텍스트 상자 이름 지정

3.value: 텍스트 입력 상자의 기본값을 설정합니다(일반적으로 프롬프트 기능부터 시작)

>
<html >
<head>
"콘텐츠 유형" content= "text/html; charset=utf-8" >
<title>텍스트 입력 상자, 비밀번호 입력 상자title>
head>
<body>
& lt; form method= " post"action="save.php">
계정:
<input type = "text" name = "myName" />
<br />
密码:
<input type = "비밀번호 " name = "pass"/>
form>
body>
html>

결과:

계정:
비밀번호:

텍스트 필드: 여러 줄 텍스트 입력 지원

사용자가 양식에 큰 텍스트를 입력해야 하는 경우 텍스트 입력 필드가 사용됩니다.

구문:

<textarea rows = "행 수" cols = "열 수" > text < ;/ETextarea & gt;

설명: 1. 텍스트 입력 도메인은 & lt ; textarea & gt; .cols: 텍스트 입력 필드의 열 수를 입력합니다.

을 입력합니다.

>
<html>
<head >
<meta http-equiv="콘텐츠 유형" content="text/html; 문자 집합 =utf-8">
<title>文本域title >
head>
<body>
<form method = "post"action = "save.php">
<라벨> 소개label>
<textarea rows = "5" cols = "10" >여기에 콘텐츠를 입력하세요... textarea>span>
< input type = "제출 " value = " 알았어
<input type = "재설정" value = "재설정" name = "재설정" />
form>
body
>

html
>
자세한 설명은 추후에 하겠습니다. 라디오 버튼 상자와 체크 상자를 사용하여 사용자가 선택할 수 있도록

<input type = "라디오/체크박스" value = "값" name = "name" checked = "checked" />

설명:

1. 유형 : 라디오 : 제어 싱글 선택 상자

확인란: 컨트롤 확인란

2. 값: 서버에 데이터를 제공하는 값

3. 이름: 백그라운드 프로그램 ASP 및 PHP에서 사용할 컨트롤 이름

4. 선택: 설정 시 선택됨 = "선택됨"인 경우 이 옵션이 기본적으로 선택됩니다.

> >
<head>
<metahttp-equi v= "콘텐츠 유형" 콘텐츠 ="text/html; charset=utf-8">
<title> 선택 윤곽, 확인란 title>
head> <
>
<form name = "iForm" method = "post" action = "save.php ">
여행을 좋아하시나요? <br />
<input type = "radio" name = "radioLove" value = "좋아요" checked = "checked"/>span>
<input type = "radio" name = "radioLove"value = "좋아요"/>
<input type = "radio" name = "radioLove" value = "그렇지 않아요 중요하지" />
/> 어떤 스포츠에 관심이 있나요? <br />
<input type = "checkbox" name = "checkbox1" value = "실행 중" />
name = "checkbox1" value = "플레이 볼" checked = "checked "/>
<input type = "checkbox" name = "checkbox1" value = "등산" checked = "checked"/>
type = "체크박스 " 이름 = "checkbox1 "value = "피트니스" />
form>
body>
html>

결과:

여행을 좋아하시나요?

어떤 스포츠에 관심이 있나요?

참고: 동일한 그룹의 라디오 버튼이 작동하려면 동일한 그룹의 라디오 버튼 이름 값이 일관되어야 합니다. 라디오 선택 역할로.

드롭다운 목록 상자

드롭다운 목록 상자를 사용하여 공간을 절약하세요. 단일 또는 다중 선택을 선택할 수 있습니다.

단일 선택:

>
<html>
<head>
<메타 http-equiv="Content-Type" content="text/html; charset=utf-8"> title>
드롭다운 페이지 테이블 상자
title> head& gt;
<body>
<form name = "iForm" method = "post" action = "save.php">
< label>爱好:< ;/label>
<select>
ㅋㅋ 옵션
>
span > >스포츠option> ; ㅋㅋ 옵션
value = "tourism">tourismoption&g t; ;option
value = "쇼핑"> ;쇼핑option >
<span style="color:#ff0000;">select > ; >
body
> ;
html
>
(풀다운 가능)
<옵션 값 = "값 제출" > 옵션제출 값: 서버에 제출된 값입니다옵션: 표시된 값입니다선택됨 = "선택됨"이며 옵션이 기본적으로 선택됩니다. 다중 선택:
위의 <선택>을 <다중 선택 = "다중">으로 변경한 다음 Windows에서는 Ctrl 키를 누른 채 동시에 클릭하고, Mac에서는 Command + 클릭을 하세요

제출 버튼을 사용하여 데이터를 제출하세요

양식에서 사용할 수 있는 버튼은 제출 버튼과 재설정 두 가지입니다. 사용자가 서버에 정보를 제출해야 하는 경우 제출 버튼을 사용해야 합니다.

문법:

<입력 유형 = "제출" 값 = "제출">

설명:

1 유형 = "sumit"인 경우에만 버튼에 제출 기능이 있습니다

2.값: 버튼에 표시된 단어

Reset

사용자가 양식 정보를 초기 상태로 재설정해야 하는 경우 재설정 버튼을 사용할 수 있으며 재설정 유형을 변경하면 됩니다.

<입력 유형 = "재설정" 값 = "재설정">

설명:

1 제출 버튼의 경우에도 마찬가지입니다. 유형 = "재설정"인 경우에만 버튼에 재설정 기능이 있습니다

2.값: 버튼

라벨 라벨

라벨 라벨에 표시되는 텍스트는 사용자에게 특별한 효과를 제공하지 않습니다. 해당 기능은 라벨 라벨 내의 텍스트를 클릭하면 마우스 사용자의 사용성을 향상시키는 것입니다. , 이 컨트롤이 트리거됩니다. 즉, 사용자가 레이블을 선택하기 위해 클릭하면 브라우저가 자동으로 레이블과 관련된 양식 컨트롤로 초점을 돌립니다(레이블과 연결된 양식 컨트롤이 자동으로 선택됩니다).

구문:

참고: 라벨 의 for 속성 값은 관련 컨트롤 의

과 동일해야 합니다.

<form>
="남자"> 남성 label> ;
<input type="radio" name="성별" <span 스타일 ="색상:#ff0000;">id="남성"span> /> ;
<br />
<label for="female">女label >
ㅋㅋㅋ span style= "색상:#990000;">id="여성"span> />
<label for="email">이메일 주소를 입력하세요label >
<input type="email" <span style ="색상:#ff6666;" >id="이메일"span>placeholder="이메일 입력" >
form>

결과:

남성 여성
이메일 주소를 입력하세요

다음은 제가 복사해서 확인할 수 있는 내용입니다:

>
< html >
<head> <meta
http-equiv
= "내용- "content="text/html; charset=utf-8"> 을 입력하세요.
<title> form title>
머리 >
<body>
<form>
어떤 스포츠에 관심이 있나요: <br/>
<label for = "sport1">慢跑 라벨>
<input type = "checkbox" name = "sports" id = "sport1"/> ;
<br />
<label for = "sport2">登山 label>
<input type = "checkbox" name = "sports" id = "sport2"/> ;
<br />
<label for = "sport3">篮球 라벨>
<input type = "checkbox" name = "sports" id = "sport3"/> ; <br />
양식>
body>
html>

결과:

관심 있는 스포츠:
jogging
climbing
basketball

HTML5의 form 태그 사용법에 대한 자세한 설명

관련 기사