(前端)html与css，10、表单_html-js-css

概述表单就是网页上可以提供用户输入和选择的一些控件。 1、from标签所有的表单元素需要写在from标签内部，不是一个结构性的标签，而是一个功能性标签。功能:规定我们提交的数据发送到哪里，发送的方法是那种。 method:方法，提交数据的方法，属性值:get，post action:提交的位置 2、文本框允许用户输入文本。 input:输入。有一个属性:type，根据属性值不同，input标签

表单就是网页上可以提供用户输入和选择的一些控件。

1、from标签

所有的表单元素需要写在from标签内部，不是一个结构性的标签，而是一个功能性标签。
功能:规定我们提交的数据发送到哪里，发送的方法是那种。
method:方法，提交数据的方法，属性值:get，post
action:提交的位置

2、文本框

允许用户输入文本。
input:输入。
有一个属性:type，根据属性值不同，input标签代表的是不同的表单元素。
文本框input标签type属性值为:text
value属性值是未输入之前默认的文本内容。

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        文本框: @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="text"@H_419_35@ value@H_419_35@="默认文本"@H_419_35@ />@H_419_35@    </@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

3、密码框

也需要用input标签，但是type属性值变为password

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        密码框:@H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="password"@H_419_35@ />@H_419_35@    </@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

4、按钮

按钮有三种:普通、提交、重置。
普通type:button
提交type:submit
重置type:reset

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@input @H_419_35@type@H_419_35@="button"@H_419_35@ value@H_419_35@="普通按钮"@H_419_35@ />@H_419_35@        <@H_419_35@input @H_419_35@type@H_419_35@="reset"@H_419_35@  value@H_419_35@="重置按钮"@H_419_35@ />@H_419_35@        <@H_419_35@input @H_419_35@type@H_419_35@="submit"@H_419_35@ value@H_419_35@="提交按钮"@H_419_35@ />@H_419_35@    </@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

点击提交，文本框、密码框提交数据，恢复默认状态。
点击重置，文本框、密码框直接恢复默认状态。

5、单选框

type:radio收音机的意思，同一组单选框只能选择一个。

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        性别:        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@/>@H_419_35@男        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@/>@H_419_35@女        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@/>@H_419_35@保密    @H_419_35@</@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

发现三个选项都能选中，因为没给同一组的单选框添加name属性。

添加后代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        性别:        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@男        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@女        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@保密    @H_419_35@</@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

注意:name属性值必须一致。

6、多选框

type:checkBox，可以在同一组内进行多选

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        兴趣爱好:        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@唱歌        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@跳舞        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@篮球        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@足球        @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@写代码    @H_419_35@</@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

7、文本域

标签:textarea，可以输入多行文本。
两个上属性值，规定显示多少行多少列文字。
rows:属性值是数字，数字表示写多少行。
cols:属性值是数字，表示一行有多少个字节。

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        个人简介:        @H_419_35@<@H_419_35@textarea @H_419_35@cols@H_419_35@="30"@H_419_35@ rows@H_419_35@="10"@H_419_35@>@H_419_35@默认的文本</@H_419_35@textarea@H_419_35@>@H_419_35@    </@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

默认值cols=30，30个字节15汉字。
默认值rows=10，默认10行，超过10行出现滚动条。

效果图↓

8、下拉菜单

是一组标签，必须同时出现，有嵌套关系。
select:选择
option:选项
嵌套关系:select>option

代码↓

<@H_419_35@form@H_419_35@>@H_419_35@    <@H_419_35@p@H_419_35@>@H_419_35@        所在城市        @H_419_35@<@H_419_35@select@H_419_35@>@H_419_35@            <@H_419_35@option@H_419_35@>@H_419_35@北京</@H_419_35@option@H_419_35@>@H_419_35@            <@H_419_35@option@H_419_35@>@H_419_35@上海</@H_419_35@option@H_419_35@>@H_419_35@            <@H_419_35@option@H_419_35@>@H_419_35@广州</@H_419_35@option@H_419_35@>@H_419_35@            <@H_419_35@option@H_419_35@>@H_419_35@深圳</@H_419_35@option@H_419_35@>@H_419_35@            <@H_419_35@option@H_419_35@>@H_419_35@杭州</@H_419_35@option@H_419_35@>@H_419_35@        </@H_419_35@select@H_419_35@>@H_419_35@    </@H_419_35@p@H_419_35@>@H_419_35@</@H_419_35@form@H_419_35@>@H_419_35@

VIEw Code@H_419_35@

效果图↓

实际中下拉菜单一般用_ul无序列表写。

整体代码

<!@H_419_35@DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"@H_419_35@>@H_419_35@<@H_419_35@HTML @H_419_35@xmlns@H_419_35@="http://www.w3.org/1999/xhtml"@H_419_35@ xml:lang@H_419_35@="en"@H_419_35@>@H_419_35@<@H_419_35@head@H_419_35@>@H_419_35@    <@H_419_35@Meta @H_419_35@http-equiv@H_419_35@="Content-Type"@H_419_35@ content@H_419_35@="text/HTML;charset=UTF-8"@H_419_35@>@H_419_35@    <@H_419_35@Title@H_419_35@>@H_419_35@document</@H_419_35@Title@H_419_35@>@H_419_35@</@H_419_35@head@H_419_35@>@H_419_35@<@H_419_35@body@H_419_35@>@H_419_35@    <@H_419_35@form@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            文本框: @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="text"@H_419_35@ value@H_419_35@="默认文本"@H_419_35@ />@H_419_35@        </@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            密码框: @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="password"@H_419_35@ />@H_419_35@        </@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            性别:            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@男            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@女            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="radio"@H_419_35@ name@H_419_35@="sex"@H_419_35@ />@H_419_35@保密        @H_419_35@</@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            所在城市            @H_419_35@<@H_419_35@select@H_419_35@>@H_419_35@                <@H_419_35@option@H_419_35@>@H_419_35@北京</@H_419_35@option@H_419_35@>@H_419_35@                <@H_419_35@option@H_419_35@>@H_419_35@上海</@H_419_35@option@H_419_35@>@H_419_35@                <@H_419_35@option@H_419_35@>@H_419_35@广州</@H_419_35@option@H_419_35@>@H_419_35@                <@H_419_35@option@H_419_35@>@H_419_35@深圳</@H_419_35@option@H_419_35@>@H_419_35@                <@H_419_35@option@H_419_35@>@H_419_35@杭州</@H_419_35@option@H_419_35@>@H_419_35@            </@H_419_35@select@H_419_35@>@H_419_35@        </@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            兴趣爱好:            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@唱歌            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@跳舞            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@篮球            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@足球            @H_419_35@<@H_419_35@input @H_419_35@type@H_419_35@="checkBox"@H_419_35@ name@H_419_35@="hobby"@H_419_35@ />@H_419_35@写代码        @H_419_35@</@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            个人简介:            @H_419_35@<@H_419_35@textarea @H_419_35@cols@H_419_35@="30"@H_419_35@ rows@H_419_35@="10"@H_419_35@>@H_419_35@默认的文本</@H_419_35@textarea@H_419_35@>@H_419_35@        </@H_419_35@p@H_419_35@>@H_419_35@        <@H_419_35@p@H_419_35@>@H_419_35@            <@H_419_35@input @H_419_35@type@H_419_35@="button"@H_419_35@ value@H_419_35@="普通按钮"@H_419_35@ />@H_419_35@            <@H_419_35@input @H_419_35@type@H_419_35@="reset"@H_419_35@  value@H_419_35@="重置按钮"@H_419_35@ />@H_419_35@            <@H_419_35@input @H_419_35@type@H_419_35@="submit"@H_419_35@ value@H_419_35@="提交按钮"@H_419_35@ />@H_419_35@        </@H_419_35@p@H_419_35@>@H_419_35@    </@H_419_35@form@H_419_35@>@H_419_35@</@H_419_35@body@H_419_35@>@H_419_35@</@H_419_35@HTML@H_419_35@>@H_419_35@