表单在网络中很常见，如百度的搜索框，各种登录框密码，贴吧的帖子等都需要用表单来完成。表单是元素form且必须要有action属性来设置表单提交的地址。使用form创建的仅仅只是空表单，还有要表单项，常用的表单项有文本框（text），密码输入框（password），提交按钮（submit），单选框（radio），多选框（checkbox），下拉列表（select和option），文本域（textarea），重置按钮（reset），单纯的按钮（button）另外还有可以对表单项分组的长表单（field和legend）。还有一些一些细节详情在下方代码，比如：name表示提交内容的名字，value在文本框和密码框是是默认值，在单选和多选框是被提交的内容。label标签的for属性值与input标签的id属性值两者结合的作用。

　　最后我们可以用<button type="text"></button>等方式来达到input元素一样的效果，且这样方法更加灵活，比如可以添加图片。欢迎各位留言讨论！

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <!-- 表单的作用就是向服务器提交信息

         form标签必须要有action来设置表单提交的地址，

         现在我们设置一个假的地址target

         使用form仅仅是空表单，还要添加表单项

         -->

        <form action="target.html">

            <!-- 创建一个表单项：文本框type=“text”,

            name表示提交内容的名字

            value用来设置默认值-->

        用户名<input type="text" name="username"  value="请输入用户名" />

        <!-- 创建一个提交按钮type="submit",此时value用来设置按钮上的文字 -->

        <br>

        <input type="submit" value="注册"/>

        <!-- 创建一个密码框，输入密码时不是明文显示而是黑点显示，value是默认值 --><br>

        密码<input type="password" name="password" value="123"/>

        <!-- 创建一个单选按钮type="radio"

        name必须一样像这样只有选项没有内容的

        还必须有value属性作为提交时的内容

        如果希望在单选或多选表单项内默认选中，那么使用checked="checked"--><br>

        <input type="radio" name="gender" value="male" />男

        <input type="radio" name="gender" value="female" checked="checked"/>女

        <br>

        <!-- 创建一个多项框text=“checkbox” value与name组成提交的名值对-->

        <input type="checkbox" name="hpbby"  value="lq" />篮球

        <input type="checkbox" name="hpbby"  value="lq" />足球

        <input type="checkbox" name="hpbby"  value="lq" />排球

        <input type="checkbox" name="hpbby"  value="lq" />网球

        <br>

        <!-- 下拉列表，用select和option

         name属性给select，value指定为option

         可以用selected=“selected”来设置默认选项

         multiple是select的专用属性，使选项可多选 multiple="multiple"

         在select使用optgroup分组,lable设置分组标签-->

        <select name="mx" >

            <optgroup label="奔跑吧兄弟">

            <option value ="fnn">王祖蓝</option>

            <option value ="fnn">杨颖</option>

            <option value ="fnn">邓超</option>

            </optgroup>

            <optgroup label="极限男人帮">

            <option value ="fnn">黄渤</option>

            <option value ="fnn">黄磊</option>

            <option value ="fnn" selected="selected">张艺兴</option>

            </optgroup>

        </select><br>

        <!-- 创建多行文本域，使用textarea

        可添加name属性-->

            <textarea name="info">

            </textarea><br>

            <!-- 创建一个重置按钮 使选项都变回默认值 -->

            <input type="reset"  /><br>

            <!-- 创建一个单纯的按钮，唯一的作用就是被点击，以后可以与js结合发挥作用 -->

            <input type="button" value="这是一个按钮" /><br>

            <!-- 除了input还能用<button></button>标签来实现同样的功能

            这种方式更灵活，可以加入图片等 -->

            <button type="button">按钮2</button><br>

            <button type="reset">重置2</button><br>

            <button type="submit">注册2</button><br>

            <!-- 另外可以将提示文字放到<label></label>标签里；也可以

            为label添加for属性值 为inpute添加id属性，两者就组成了一组

            这样当我们点提示文字也能选中内容，更加的方便。 -->

            <label for="username">用户名</label><input type="text" name="username" id="username" value="请输入用户名" />

            <br>

            <input type="radio" name="gender" id="male" value="male" /><label for="male">男性</label><br>

            <!-- 补充：长表单，把表单分成几个部分用fieldset，将表单的

            同一组放在一个feildset里，然后可以用legend设置组名 例子如下 -->

            <fieldset id="">

                <legend>用户信息</legend>

                <input type="text" id="" value="" />

                <input type="password" name="" />

            </fieldset>

            <fieldset id="">

                <legend>喜欢的明星</legend>

            </fieldset>

            <!-- 用的最多的还是上面密码文本多选单选 -->

        </form>

    </body>

</html>

代码在网页中实现效果如下：

【html&css学习】表单及表单项的更多相关文章

  1. 第九课 表单及表单控件 html5学习4

    表单有由表单域.提示文本.表单3部分构成 一.表单控件 input 控件 1.<input />单标签2.input属性: 可以通过type属性变换形状 value默认值 name名称 c ...

  2. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  3. 8款最新CSS3表单 环形表单很酷

    当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看. 1.CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单 ...

  4. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  5. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  6. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  7. 统一修改表单参数(表单提交的空字符串统一转null)

    统一修改表单参数(表单提交的空字符串统一转null) 1.介绍: 我们业务中有时会遇到提交的表单中某个参数为空字符串,导致后台接受的为空字符串("")而不是我们理想中的null,会 ...

  8. <form> 标签 // HTML 表单 // from 表单转换成json 格式

    <form> 标签   // HTML 表单    // from 表单转换成json 格式 form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源 表 ...

  9. MVC动态生成的表单：表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

  10. IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例

    这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...

随机推荐

  1. oracle 多表查询，请教个问题

    首先,是有一个合同表,对应数据库表 lg_bill_of_lading_detail  简称 bold    有一个用户表 EMT_USER 简称 e 合同审批 后,合同表里  会有一个审核人AUDI ...

  2. 支付接口API

    //微信支付SDK https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1

  3. HDU 1312 Red and Black（经典DFS）

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1312 一道很经典的dfs,设置上下左右四个方向,读入时记下起点,然后跑dfs即可...最后答 ...

  4. IDEA 导出可执行jar包【转载】

    1,在项目上鼠标右键 --> Open Module Settings,或者[shift+ctrl+alt+s] 2, Artifacts --> + --> JAR --> ...

  5. JS知识点查漏补缺

    知识点1: 判断语句中遇到NaN即为 False 只需要注意遇到False即为False即可 使用join(),toString()皆可以将数组转化为字符串 二者的相同点在于都可以转化数组为字符串 二 ...

  6. C++基础之字符串string

    C++基础之字符串string 标准库类型string表示可变长的字符序列,使用string类型必须首先包含string头文件.作为标准裤的一部分,string定义在命名空间std中. 定义和初始化s ...

  7. .NET中的字符串(2):你真的了解.NET中的String吗？

    概述 String在任何语言中,都有它的特殊性,在.NET中也是如此.它属于基本数据类型,也是基本数据类型中唯一的引用类型.字符串可以声明为常量,但是它却放在了堆中.希望通过本文能够使大家对.NET中 ...

  8. 手把手教你使用Hexo+GitHub搭建自己的个人博客网站

    安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...

  9. 【代码审计】MenInfo文件包含漏洞

    代码审计是我之前一直不敢涉及的领域,它包含的知识面太广.最近才开始学习,前段时间写的第一篇代码审计的文章 更多的感觉像是一个黑盒测试.我也会尽量把文章写的通俗易懂.代码审计 0基础从大牛的蜕变 从这里 ...

  10. h5页面判断移动端系统为Android或IOS

    最近遇到了一个需求,即所谓的 app+web 混合开发,需要将 h5 内嵌到 APP 中,这个时候因为要对 Android 和 IOS 有不同的处理逻辑,所以我们就需要判断一下,移动端的系统到时是哪一 ...