柠檬铺

立即咨询

柠檬铺

千呼万唤 HTML 5 (7) - 表单元素

介绍
HTML 5: 表单元素

  • 表单元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
  • 表单验证

示例
1、form - 表单
element/form/form.html

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html>

<head>

    <title>form</title>

</head>

<body>

    

    <!--

        form - 表单，用于提交子元素数据到服务端

          accept-charset - 指定提交数据的编码格式

          action - 提交的目标地址

          autocomplete - 是否对所有子元素启用自动完成功能（on 或 off）

          enctype - 编码类型（application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain）

          method - form 的 method（默认是 GET）

          name - form 的 name

          novalidate - 提交时是否不需要验证，boolean 类型

          target - form 的 target

    -->

    

    <form action="#">

        <input type="text" name="txt" value="webabcd" />

        <input type="submit" name="btn" value="submit" />

    </form>

    

</body>

</html>

 

2、label - 关联其它元素
element/form/label.html

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!doctype html>

<html>

<head>

    <title>label</title>

</head>

<body>

    

    <!--

        label - 关联其它元素

          form - 指定 label 所属的表单，多个用空格分开

          for - 关联元素的 id

    

        DOM

          form, htmlFor

          control - 返回 label 所关联的元素

    -->

    

    <label><input type="checkbox" /> checkbox title</label>

    

    <br />

    

    <input id="chk" type="checkbox" />

    <label id="lbl" for="chk">checkbox title</label>

    

    <script type="text/javascript">

        var lbl = document.getElementById("lbl");

        alert(document.getElementById("lbl").htmlFor);

        alert(document.getElementById("lbl").control.outerHTML);

    </script>

</body>

</html>

 

3、button - 按钮元素
element/form/button.html

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!doctype html>

<html>

<head>

    <title>button</title>

</head>

<body>

    

    <!--

        button - 按钮元素

          autofocus - 页面加载后是否自动置为焦点，boolean 类型

          disabled - 是否无效，boolean 类型

          form - 指定关联的 form 的 id

          formaction - 指定关联 form 的 action

          formenctype - 指定关联 form 的编码类型

          formmethod - 指定关联 form 的 method

          formnovalidate - 指定关联 form 在提交时是否不需要验证，boolean 类型

          formtarget - 指定关联 form 的 target

          type - 按钮类型（button 或 submit 或 reset）

    -->

        

    <button type="button">button</button>

    

</body>

</html>

 

4、select - 下拉列表框元素, option - 选项, optgroup - 选项组
element/form/select_option_optgroup.html

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!doctype html>

<html>

<head>

    <title>select option optgroup</title>

</head>

<body>

    <!--

        select - 下拉列表框元素

          autofocus, disabled, form, name, required, size

          multiple - 是否可多选，boolean 类型

    

        option - 选项

          disabled, label, selected, value

    

        optgroup - 选项组

          disabled, label

    -->

    

    <select>

        <option value="1" label="aaa" />

        <option value="2" label="bbb" />

        <option value="3" label="ccc" selected />

        <option value="4" label="ddd" />

        <option value="5" label="eee" />

    </select>

    

    <select multiple>

        <option value="1">aaa</option>

        <option value="2">bbb </option>

        <option value="3" selected>ccc</option>

        <option value="4" selected>ddd</option>

        <option value="5">eee </option>

    </select>

    

    <select>

        <optgroup label="optgroup 1">

            <option value="1">aaa</option>

            <option value="2">bbb </option>

        </optgroup>

        <optgroup label="optgroup 2">

            <option value="3">ccc</option>

            <option value="4">ddd </option>

        </optgroup>

        <optgroup label="optgroup 3">

            <option value="5" selected>eee</option>

            <option value="6">fff </option>

        </optgroup>

    </select>

</body>

</html>

 

5、datalist - 数据列表元素, option - 数据项
element/form/datalist_option.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now