HTML-表单标签

来源：互联网发布：三国志11 mac 10.12 编辑：程序博客网时间：2024/05/16 05:57

表单标签

概念：
—>表单：表单就是专门用来收集用户信息的；
—>元素：在HTML中，标签、标记、元素都是指HTML中的标签。例如<a>a标签、a标记、a元素；
—>表单元素也是HTML中的标签，只不过在浏览器中所有的表单标签都有特殊的外观和默认的功能；

表单的格式：<form>表单元素</form>。一定要注意啊注意！！！一下列出的表单元素必须放在<form></form>中间！！！

常见的表单元素：
—>input标签，type属性非常重要，有多类型的取值，据定了input标签的功能和外观。
—>text输入框，password密码框，radio 单选框，checkbox多选，button按钮，reset重置按钮，
—>注意：默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个name属性，并且name属性还必须设置相同的值；
—>注意：要想要单选框默认选中其中一个，可以给input标签添加checked属性；
—>注意：在HTML中如果属性的取值和属性的名称一样，可以只写一个，如可以checked="checked"也可以checked。但是在XHTML中必须写上取值，所以在企业开发中推荐不要省略取值；

--->在input标签中添加`<type="button">`属性定义普通按钮，通过`value`属性给按钮指定标题，配合js完成一些操作；在input标签中添加`<input type="image" src="">`属性定义图片按钮；

--->重置按钮`<input type="reset" value="清空">`，用于晴空表单中已经填写好的数据，若想修改重置按钮默认的按钮标题可以通过value属性修改。

--->提交按钮`<input type="submit">`，将表单中已经填写好的数据，提交到远程服务器。要想将表单中填写好的数据提交到远程服务器，必须具备两个条件：一是给form表单添加一个action属性，通过这个action属性置顶需要提交的服务器地址；二是需要给需要提交到服务器的表单元素添加一个name属性。完成这两步就可以提交了，以键值对的形式提交给服务器。

--->隐藏域`<input type="hidden" name="" value="">`，配合提交按钮将一些数据默默的悄悄的提交给服务器。Ajax(待学！)。

--->默认情况下文字和输入框没有关联，即点击文字输入框不会聚焦，若想点击文字时让对应的输入框聚焦，需要将文字和输入框进行绑定。将文字与输入框绑定用`label`标签。绑定的格式：首先将文字用`label`标签包裹起来，其次给输入框添加`id`属性，最后在`label`标签中通过`for`属性和和输入框中的`id`进行绑定即可。

这里写图片描述

—>给输入框绑定待选列表datalist的步骤：(了解下即可，支持率太低)

首先设置一个输入框，然后设置一个datalist列表（带有option标签），再给datalist列表标签添加id属性，最后给输入框添加list属性将datalist对应的id绑定。
格式：
<datalist> <option>待选项内容</option> </datalist>
这里写图片描述

—>可以自动校验输入的内容是否符合邮箱的格式<input type="email"> 这里写图片描述

—>select标签用于定义下拉列表。下拉列表不能输入内容，但是可以直接在下拉列表中选择内容。通过给option标签添加select属性来指定列表的默认值。可以通过给option标签包裹一个optgroup标签，设置一下optgroup标签中的label属性，来给下拉标签中的数据分类呈现。格式：

<select>    <optgroup label="分组1名称">        <option>列表数据</option>    </optgroup>        <optgroup label="分组2名称">        <option>列表数据</option>    </optgroup></select>

—>textarea标签：定义一个多行输入框。默认情况下输入框可以无限换行；默认情况下输入框有自己的宽度和高度；可以通过cols和rows属性来指定输入框的宽度和高度，但是虽然指定了列数和行数，但还是可以无限的往下输入，此时会有混动条；默认情况下输入框是可以手动拉伸的（在输入框的右下角有可以拉伸的小东西）。

<textarea cols="2" rows="10"></textarea>

以上表单标签的示例代码

<!--表单--><form action="http://www.baidu.com">    <!--明文输入框-->    账号：<input type="text" name="username">    <br>    <!--暗文输入框-->    密码：<input type="password" name="pass">    <br>    <!--输入账号为：xiao，密码为：999999-->    <!--点击提交时，页面跳转到https://www.baidu.com/?username=xiao&pass=999999&sex=on-->    <!--注意，其中的username=xiao&pass=999999-->    <!--给输入框设置默认值-->    <input type="text" value="sunxiao">    <input type="password" value="123">    <br>    <!--单选框-->    性别：    <input type="radio" name="sex">男    <input type="radio" name="sex">女    <input type="radio" name="sex" checked="checked">保密    <!--其中checked也可以直接只写checked-->    <br>    <!--多选框-->    爱好：    <input type="checkbox">篮球    <input type="checkbox" checked="checked">瑜伽    <input type="checkbox">足球    <input type="checkbox">骑马    <input type="checkbox">蹦极    <br>    <!--按钮-->    <input type="button" value="我是按钮" onclick="alert('我是按钮');">    <br>    <!--图片按钮-->    <input type="image" src="images/xd.png" width="100px" height="100px" onclick="alert('我是熊顿，狗熊的熊，牛顿的顿！此处不能用双引号，只能用单引号，因为外层已经用过了双引号！！！！！！！！');">    <br>    <!--重置按钮-->    <input type="reset" value="清空">    <br>    <!--提交按钮-->    <input type="submit">    <br>    <!--隐藏域-->    <!--https://www.baidu.com/?username=&pass=&sex=on&hidden_name=hidden_content-->    <input type="hidden" name="hidden_name" value="">    <br>    <!--将输入框和文字绑定（推荐）-->    <label for="zh">账号：</label><input type="text" id="zh"><br>    <label for="mm">密码：</label><input type="password" id="mm">    <!--另一种方式（有局限性）-->    <label>账号：<input type="text"></label><br>    <label>密码：<input type="password"></label>    <br>    <!--datalist标签，用于给输入框绑定带选项。傻瓜式的模仿一下百度搜索时自提示，深入的还需用到Ajax-->    请输入你喜欢的水果：<input type="text" list="fruits">    <datalist id="fruits">        <option>草莓</option>        <option>芒果</option>        <option>榴莲</option>        <option>香橙</option>        <option>香蕉</option>        <option>葡萄</option>    </datalist>    <br>    <!--可以自动检验输入的内容是否符合邮箱的格式-->    <!--可以自动校验输入的内容呢是否是URL地址-->    <!--可以自动校验输入的内容呢是否是数字-->    邮箱：<input type="email"><br>    域名：<input type="url"><br>    数字：<input type="number"><br>    年月日：<input type="date"><br>    提交：<input type="submit"><br>    <!--select标签用于定于下拉列表-->    <select name="" id="">        <optgroup label="中国">            <option value="">北京</option>            <option value="">上海</option>            <option value="">深圳</option>            <option value="">广州</option>            <option value="" selected="selected">青岛</option>        </optgroup>        <optgroup label="美国">            <option value="">阿拉巴马州 </option>            <option value="">阿拉斯加州</option>            <option value="">亚利桑那州</option>            <option value="">阿肯色州</option>            <option value="" selected="selected">加利福尼亚州</option>        </optgroup>    </select>    <br>    <!--textarea多行文本输入框-->    <textarea cols="30" rows="10"></textarea></form>

0 0