HTML --表单和输入

时间 2019-11-10

标签 html 表单输入栏目 HTML 繁體版

原文原文链接

表单的做用是搜集不一样类型的输入信息
html

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

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

表单使用表单标签订义code

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

输入orm

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

1.文本域(Text Fields)
utf-8

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

<!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)input

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

<!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>