전투에 웹 프런트 엔드를 얻기 : HTML5 폼 태그

양식 소개

양식 양식은 주로 사용자가 웹 응용 프로그램에 데이터를 보낼 수있는 웹 응용 프로그램 데이터와 상호 작용하는 사용자를 위해 사용되는 웹 페이지가 자신의 사용에 대한 데이터를 전송 가로 챕 수 있습니다. 드롭 다운 메뉴, 버튼, 체크 박스, 라디오 버튼, 일반적으로 태그 라벨 폼 요소 객체를 설명하는 데 사용되는 시간, 형태 요소들이 단일 라인 / 다중 - 라인 텍스트 박스있는 형태 요소에 의해 일반적으로 복수 형성 . 다음과 같이 사용할 수있는 속성.

폼 정보 처리 프로그램의 주소에 작용.
방법은 브라우저에서 HTTP 양식 제출 방법을 사용.
HTTP GET GET 메소드 프로토콜에 대응하는이 형태의 데이터는 '?'로 구분하여 상기 URI에 첨가
POST 메소드에 대응하는 포스트 HTTP 프로토콜, 폼 데이터는 HTTP 프로토콜 요청 패킷의 본체 부에 포함.
폼 세트의 이름 이름
타겟은 브라우저 후 제출 된 정보는 어디에 표시된 응답을 수신 형태이다.
_self는 _blank, _parent,이 동일한 값 및 하이퍼 _top

폼 데이터 콘텐츠 형식

폼 데이터는 콘텐츠 타입 속성에 enctype 의해 설정된

1. 애플리케이션 / x-www-form-urlencoded를

코딩 방법을 보내기 전에 모든 문자 (기본값)을 사용하려면 :

1) +]를 이용하여 문자 등 (같이, 예약 된 문자는 일반적으로 특정 용도로 사용되는 대체 공백 컨트롤의 이름과 값은 이스케이프 /; = @ 등)?. 숫자가 아닌 및 변환 (HH는 문자의 ASCII 코드를 나타내는 두 개의 16 진수를 나타냄)이 % HH를 사용하여 알파벳 문자,

2) 그들은 문서에 데이터 스트림에 나타나는 순서에 나와있는 "이름 / 값"쌍을 제어 할 수 있습니다. 사용 및 "이름"사이의 간격, "="분할, 두 개의 사용 "값", "이름 / 값입니다."

2. 다중 / 폼 데이터

아니 문자 인코딩. 양식을 포함 파일 업로드 컨트롤을 사용하는 경우 [],이 값을 사용해야합니다. 데이터는 문서 데이터 스트림의 일부로서, 각 부 순차적가 문서 데이터 스트림에서 나타나는 순서에 따라 서버로 전송되어, 복수의 부분, 구조도 제어의 각 대표로 분할하고, 경계 부분의 각은 아니다 이 데이터에 나타납니다. 각 섹션은 제 desposition 컨텐츠의 제목을 갖고, 그 값의 형식은 다음 내용 - 처리 : 폼 데이터, 이름 = "myControl"

3. 텍스트 / 일반

스페이스는 "+"플러스가 아닌 특수 문자 인코딩으로 변환됩니다.

양식 구성 요소

입력 구성 요소에 다음과 같은 속성을 사용할 수있는 사용자로부터 데이터를 수신하기위한,

1, 유형에 대한 모듈을 설정 입력

텍스트 행 텍스트 상자에
암호를 암호 상자에 입력의 내용이 차단됩니다.
체크 박스 상자가 기본적으로 선택 체크 속성을 사용하여 전송 한 구성 요소 값의 속성 값을 설명하는 데 사용되어야합니다.
무선 라디오 버튼이 디폴트로 선택 체크 특성을 이용하여 제출 성분 값의 속성 값을 설명하는데 사용되어야한다. 라디오 버튼 그룹의 모든 구성 요소는 그래서 하나 개의 구성 요소 선택 버튼 그룹마다 것을, 같은 이름의 값을 가져야한다
버튼 제출 제출
리셋 버튼을 재설정
파일 파일 버튼을, 선택한 파일 시스템에 대한 어셈블리 파일은
구성 요소가 페이지에 표시되지 않는, 숨겨진 필드 숨겨진, 그러나 그것의 값이 제출됩니다.
이미지 이미지 버튼 SRC는, 이미지를로드 텍스트를 대체 할 대체 문을 사용하는 데 사용되어야합니다.
버튼을 누름 단추

2, 설정에 대한 구성 요소 유형의 이름을

3, 초기화 옵션을 설정하는 값입니다. 　　　　

기본 속성으로 선택 4, 확인 라디오 버튼, 체크 박스

5 비활성화 비활성화 구성 요소는 사용하지 않도록 구성 요소 값을 제출할 수 없습니다

6, 크기 제어 전류의 초기 폭 픽셀 폭. 컨트롤 형식은 텍스트, 암호가 아니라면, 시간 폭 문자의 수를 나타내는 정수 값, 기본값은 20입니다

도 7은, 최대 길이는 문자를 입력 할 수있는 최대 값을 지정한다. 텍스트를 입력, 비밀번호의 제어에 적합합니다.

FIELDSET 요소 태그와 컨트롤을 웹 양식의 복수를 그룹화

자식 요소 (1), 장애인 장애인 filedset 요소는 속성은 필드 셋의 영향을받습니다

2 명 FIELDSET 요소의 이름

라벨에 의해 FIELDSET 제목

web前端开发学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Title</legend>
            <input type="radio" id="radio">
            <label for="radio">click me</label>
        </fieldset>
    </form>
</body>
</html>

어셈블리 입력 / 버튼 버튼 다음 속성을 사용할 수있는 사용자로부터 데이터를 수신하기위한,

Button 컨트롤

버튼 제출 리셋 : 타입 지정 제어형 1 입력

2 입력 이름 버튼 이름.

도 3에서, 관련된 입력 값 버튼의 값 이름의 값과 함께 전송 될

어셈블리 라벨 다음 속성을 사용할 수있는 형태 조립체의 타이틀을 나타내는

1 코드 예가 상술되어, 상기 헤더의 설정 값 ID와 조립하는 형태에 대해, 일치

구성 요소를 선택 다음과 같은 속성을 사용할 수있는 드롭 다운 목록 또는 목록을 나타내는

선택 요소는 공간 복수의 속성을 포함하지 않는 경우. (1), 복수의 선택 여부를 나타내는 다수의 지정된 컨트롤 타입 부울 값이 허용되고, 양식 입력이 메뉴 (콤보 박스)로 표시되어있는 경우, 속성의 크기 및 특성 여러 하나 개의 형태 유형 목록 상자로 표시됩니다.

디스플레이의 크기는 크기가 동시에 표시 행의 수를 나타내는 경우, 목록을 스크롤 할 때,도 2에서, 라인 수를 표시한다. 기본값은 0입니다. 그것은 비 목록 표시를 나타냅니다

3 비활성화 비활성화 구성 요소는 사용하지 않도록 구성 요소 값을 제출할 수 없습니다

도 4는, 이름은 함께 제출 양식 데이터의 다른 키와 그 조성물의 어셈블리 값 선택 부 요소 값의 이름을 지정

옵션 조립 옵션을 나타내는 종종 <선택>을 포함, <OPTGROUP>, 다음 속성에서 사용할 수있는

1, 비활성화 비활성화 구성 요소는 사용하지 않도록 구성 요소 값을 제출할 수 없습니다

2, 상기 제어 값의 초기 값을 정의한다. 양식이 제출되면, 초기 값은 서버에 제출됩니다.

3, 선택이 옵션은 기본적으로 선택되어 있음을 나타냅니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <option value="北京" disabled>北京</option>
            <option value="上海" selected>上海</option>
            <option value="广州">广州</option>
        </select>
    </form>
</body>
</html>

OPTGROUP 조립 종종 <선택>에 포함 된 표시하는 옵션 그룹의 옵션은 다음과 같은 속성에서 사용할 수있는

1, 비활성화 비활성화 구성 요소는 사용하지 않도록 구성 요소 값을 제출할 수 없습니다

2, 레이블은 옵션 그룹의 이름을 나타냅니다

3, 선택이 옵션은 기본적으로 선택되어 있음을 나타냅니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <optgroup label="广东省">
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="苏州">苏州</option>
                <option value="盐城">盐城</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

텍스트 영역 구성 요소 멀티 라인 텍스트 상자를 나타 내기 위해 사용되는 태그의 속성으로 사용할 수있는 값이 포함되어 어떠한 속성 값도 없다

1 행은 텍스트 상자의 라인 수를 정의

2 열 COLS 번호가 텍스트 상자에 정의 된

도 3은 경사가 랩 여부를 나타내는

　　포장되지 오프 •

　　• 하드 자동 하드 캐리지 리턴, 줄 바꿈 요소는 함께 서버로 전송한다

　　• 부드러운 자동 소프트 캐리지 리턴, 라인 피드 요소는 서버로 전송되지 않는다

4, 장애인 비활성화 구성 요소는 사용하지 않도록 구성 요소 값을 제출할 수 없습니다

5, 읽기 전용 구성 요소가 읽기 전용, 그 값이 여전히 제출을 나타냅니다

(6), 이름은 구성 요소의 이름을 지정하는 데 사용됩니다, 그 값과 함께 배경에 제출됩니다

새 양식 구성 요소

구성 요소를 진행 속성을 아래의 진행률 표시 줄에 일반적으로 사용할 수있는 작업의 완료를 나타냅니다

1, 최대 속도로 작업 요소에 필요한 작업, 기본 값은 1입니다

최대 값이 1 인 경우 2 일의 값 정량이 완료되었으며,이 값은 0과 1 사이의 소수 여야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <progress value="70" max="100"></progress>
    </form>
</body>
</html>

출력 구성 요소에 다음과 같은 속성을 사용할 사용자 액션에 의해 발생되는 결과를 나타내는

1 명 name 정의 요소

2, 다른 원소의 ID리스트, 이들 요소는 입력 값 (또는 다른 효과)을 계산하는 것을 제공했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50">+
        <input type="number" name="a" value="10">=
        <output name="result"></output>
    </form>
</body>
</html>

미터 요소 소정 범위 값의 개수를 나타낸다. 진행률 표시 줄을 제시 비슷한 효과가있다

투표 등 후보자의 총 수의 비율 투표율 디스크 사용량, 유권자 : 예를 들어,

1 값 : 지정하지 않으면 특별히 최소 및 최대 값 사이의 실제의 표시 소자는, 기본 값은 1이고

2 분 : 최소값 디폴트의 사용을 허용하는 소정의 범위를 지정은 제로

(3) 최대 : 소정의 기본값을 사용하여 지정되는 허용 범위의 최대 값은 1이고

(4) 낮은 상기 소정 범위의 하한 미만이거나 속성의 높은 값과 동일해야

(5) 높은 (평균의 높은 위험을 나타내는)가 소정 범위의 상한치

6, 최적 : 최고 값

web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>

DataList에 조립 가능한 다른 제어 값을 나타내는 값은 어느 DataList와 <선택>에 의해 하위 요소로 존재

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for=""> choose a browser from this list:</label>
    <input type="text" name="myBrowser" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>
</body>
</html>

새 양식 등록

유형 : H5에서, 입력의 종류가 확장되었습니다, 당신은 더 많은 값을 가질 수 있습니다

1, 날짜 제어 날짜 (년, 월, 일, 시간은 포함되지 않습니다)

2 날짜 로컬 날짜 시간 제어

3 시간의 시간 제어

4 월 날짜 플러그인 (년, 월)

5 주 플러그인 날짜 (년, 주) 참고 : 위의 경우에만 할 수있다 크롬, 오페라 지원

6, 디지털 제어 번호 (숫자 만)

7 범위 제어 범위 (값은 스트립을 제어함으로써 조절 될 수있다)

8 검색 검색 제어

9, 전화 전화 컨트롤

10, URL 주소 제어

11 색 컬러 제어

12, 이메일 이메일 제어