表单在网络中很常见，如百度的搜索框，各种登录框密码，贴吧的帖子等都需要用表单来完成。表单是元素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. tkinter+pickle+python的一个登录界面设计

    1.代码: #导出模块 import tkinter as tk from tkinter import messagebox import pickle #定义登录的窗口.标题.大小和位置 wind ...

  2. java平衡二叉树AVL数

    平衡二叉树(Balanced Binary Tree)具有以下性质:它是一棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树 右旋:在插入二叉树的时候,根节点的右侧高 ...

  3. linux python3编译以及 卸载，python默认为python3 ，pip默认为pip3,亲测版

    前置准备yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-de ...

  4. JavaScript的技巧45招

    JavaScript奇技淫巧45招 来自仲老师的分享: 原文地址[http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best ...

  5. C：gcc的基本使用

    分布编译 预处理:gcc -E hello.c -o hello.i 编 译:gcc -S hello.i -o hello.s 汇 编:gcc -c hello.s -o hello.o 链 接:g ...

  6. phpstudy所需运行库

    百度云链接:http://pan.baidu.com/s/1jIu0v7C 密码:j1qu

  7. 201771010135杨蓉庆 《面向对象程序设计（java）》第三周学习总结

    一:第1-3章学习内容: 第一章:复习基本数据类型 整型 byte(1个字节 表示范围:-2^7 ~ (2^7)-1) short(2个字节 表示范围:-2^15~(2^15)-1) int(4个字节 ...

  8. 关于cctype头⽂件⾥的⼀些函数

    本文摘录柳神笔记: 刚刚在头⽂件那⼀段中也提到, #include 本质上来源于C语⾔标准函数库中的头⽂件 #include ,其实并不属于C++新特性的范畴,在刷PAT⼀些字符串逻辑题的时候也经常⽤ ...

  9. Python学习第二十七课——写一个和Django框架的自己的框架

    MyWeb框架: from wsgiref.simple_server import make_server def application(environ, start_response): pri ...

  10. gym102220H 差分+树状数组（区间修改和输出）

    这题目很有意思,让我学会了树状数组的差分,更加深刻理解了树状数组 树状数组的差分写法 void add(int x,int k) { for (int i = x;i <= n;i += low ...