表单在网络中很常见，如百度的搜索框，各种登录框密码，贴吧的帖子等都需要用表单来完成。表单是元素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. Spring IoC（一）bean实例化和依赖注入

    1.IoC容器概述 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入. 所谓 IOC ,就 ...

  2. Go标准库之Log

      文章引用自 Go语言标准库log介绍 无论是软件开发的调试阶段还是软件上线之后的运行阶段,日志一直都是非常重要的一个环节,我们也应该养成在程序中记录日志的好习惯. log Go语言内置的log包实 ...

  3. zookeeper 源码（一） 选举和同步数据

    前言 在开始阅读代码前我们先来了解一下zk 的大致结构,具体大概要实现的核心功能有那些,心中有个大概的框架阅读代码时再深入其中的细节,就会非常好懂,本人觉得这是一个阅读源码的好方法,可以最快地切入到源 ...

  4. IDEA Tomcat配置 VM Option

    -server -XX:PermSize=512M -XX:MaxPermSize=1024m -Dfile.encoding=UTF-8

  5. java基础数据类型和处理

    import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSON; import java.io.*; import j ...

  6. Centos610快照克隆后网络配置

    VMware中安装的Centos610快照并克隆后网络配置 1.网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR ...

  7. Flask - app.debug=True，python manage.py和export FLASK_DEBUG=True，flask run的不同。

    TL;DR,可以直接看下面的总结 问题1:为什么app.config['DEBUG'] = True,然后flask run并没有开启debugger和reloading,而直接运行脚本(python ...

  8. Steam 游戏 《Crashlands（崩溃大陆）》修改器制作-[先使用CE写，之后有时间的话改用CheatMaker]（2020年寒假小目标12）

    日期:2020.02.15 博客期:155 星期六 [温馨提示]: 只是想要修改器的网友,可以直接点击此链接下载: 只是想拿CT文件的网友,可以直接点击此链接下载: 没有博客园账号的网友,可以将页面下 ...

  9. Springboot学习：SpringMVC自动配置

    Spring MVC auto-configuration Spring Boot 自动配置好了SpringMVC 以下是SpringBoot对SpringMVC的默认配置:==(WebMvcAuto ...

  10. 三分钟让你秒懂.Net生态系统

    提到.Net的时候,大多数人的第一反应可能就是.Net Framework和Visual Studio..Net Framework的第一个版本发布与2002年2月13日,这对于科技发展日新月异的时代 ...