表单在网络中很常见，如百度的搜索框，各种登录框密码，贴吧的帖子等都需要用表单来完成。表单是元素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. 如何使用git和github

    转载:https://www.cnblogs.com/cxscode/p/8325064.html 如何用git将项目代码上传到github 先上常用语句 git add . git commit - ...

  2. 单例模式的Java泛型实现方式

    import java.util.HashMap; import java.util.Map; /** * Created by zhao.wu on 2016/11/18. */ public cl ...

  3. android实现扫一扫等功能

    链接:https://blog.csdn.net/weixin_40399313/article/details/78814325

  4. yii2.0 验证码

    首先我们在控制器里创建一个actions方法,用于使用yii\captcha\CaptchaAction <?php namespace app\controllers; use YII; us ...

  5. mcast_set_ttl函数

    #include <errno.h> #include <net/if.h> #include <sys/socket.h> #include <netine ...

  6. windows 下安装chrome 调试iphone插件 ios-webkit-debug-proxy

    必备: 1. .NET Framework 4.5 及以上版本 2.powershell 5.1及以上版本 3.可正常访问  https://raw.githubusercontent.com/luk ...

  7. 4_1 古老的密码（UVa1339)<排序>

    古罗马帝国与各部门有一个强有力的政府系统,包括一个秘密服务部门.重要的文件以加密的形式发送防止窃听.在那个时代最流行的密码被称为替代密码和置换密码.例如,应用替代密码,改变所有字母“A”到“Y”字母表 ...

  8. ZOJ4110 Strings in the Pocket(2019浙江省赛）

    给出两个字符串,询问有多少种反转方法可以使字符串1变成字符串2. 如果两个串相同,就用马拉车算法找回文串的数量~ 如果两个串不同,从前往后找第一个不同的位置l,从后往前找第二个不同的位置r,反转l和r ...

  9. oracle用户密码忘记怎么修改

    安装完数据库很久不用常常会忘记其密码,碰到这种情况不要动不动就重装数据库,按其下方法修改即可. 一:忘记sys,system用户的密码 1,在开始菜单点击‘运行’,输入‘cmd’,打开命令提示窗口,输 ...

  10. BUG搬运工：CSCvp31778-3802 apsw_watchdog: WARNING: System memory is running low

    如下bug主要针对Cisco COS AP比如18.28.38... 主要现象: AP上连关联的终端显示的是信号满格,但是无法访问内网,所有的终端都这样,只有重启AP后才可以解决. 频率: 这种现象有 ...