表单设计与应用-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

表单的作用是搜集不同类型的输入信息

表单是一个包含表单元素的区域

表单元素允许用户在表单中(eg:文本输入框、下拉列表、单选/复选框)做出一些动作。

表单使用表单标签定义

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

输入

输入标签(<input>)是用在表单中最多的标签，输入类型是由类型属性(type)定义的。常用的类型如下

1.文本域(Text Fields)

当用户要在表单中输入字母、数字或是汉字等内容时，就会用到文本域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        name:
        <input type="text" name="name" />
        <br />
        <br />
        gender:
        <input type="text" name="gender"/>
    </form>
</body>
</html>

2.单选按钮(Radio Buttons)

当用户从若干选项中选取其中之一时，就会用到单选框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        <input type="radio" name="choice" value="A" />A
        <br />
        <input type="radio" name="choice" value="B" />B
        <br />
        <input type="radio" name="choice" value="C" />C
        <br />
        <input type="radio" name="choice" value="D" />D
    </form>
</body>
</html>

3.复选框(Checkboxes)

当用户需要从若干给定的选择中选取一个或多个选项时，会用到复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        <input type="checkbox" name="choiceA" value="A" />A
        <br />
        <input type="checkbox" name="choiceB" value="B" />B
        <br />
        <input type="checkbox" name="choiceC" value="C" />C
        <br />
        <input type="checkbox" name="choiceD" value="D" />D
    </form>
</body>
</html>

4.表单的动作属性(Action)和确认按钮

用户点击确认按钮时，表单的内容会被保存起来或是传到另一处，表单的动作属性定义了目的文件的文件名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form name="input" action="跳转的页面" method="get">
        <input type="checkbox" name="choiceA" value="A" />A
        <input type="submit" value="submit" />
    </form>
</body>
</html>

5.下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <select name="cars">
        <option value="fukesi">福克斯</option>
        <option value="gaoerfu">高尔夫</option>
        <!-- selected属性表明哪个下拉选项被选中-->
        <option value="hafu" selected="selected">哈弗</option>
        <option value="angkesaila">昂克赛拉</option>
    </select>
</body>
</html>

6.创建按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <input type="button" value="click" />
</body>
</html>

7.组合表单内相关元素

fieldset元素可以将表单内的相关元素分组，当一组表单元素被放到<fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <fieldset>
        <legend>张三</legend>
        姓名:<input type="text" />
        <br />
        性别:<input type="text" />
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
</body>
</html>

8.定义选项组

可以通过<optgroup>标签将相关的选项组合在一起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <select>
    <optgroup label="fute">
        <option value="fukesi">福克斯</option>
        <option value="furuisi">福睿斯</option>
    </optgroup>
    <optgroup label="mazida">
        <option value="mazida6">马自达6</option>
        <option value="angkesaila">昂克赛拉</option>
    </optgroup>
    <optgroup label="dazhong">
        <option value="polo">菠萝</option>
        <option value="gaoerfu">高尔夫</option>
        <option value="baolai">宝来</option>
    </optgroup>
    </select>
</body>
</html>

转载于:https://my.oschina.net/u/2312022/blog/541249