html结构代码:
<form > <!-- form 为了让重置按钮生效-->
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
昵称: <input type="text" placeholder="请输入昵称"> <br><br> 性别: <input type="radio" name='sex' checked id='man'>
<label for="man">男</label> <!--点击文字选择此项--> <input type="radio" name='sex' id='woman'>
<label for="woman">女</label> <br><br> <!-- 生日: -->
生日: <input type="date" > <br><br>
城市: <select >
<option >北京</option>
<option selected>上海</option>
<option >广州</option>
<option >深圳</option>
</select>
<br><br> <!--br换行--> 婚姻状况: <input type="radio" name="abc" checked id='marry'>
<label for="marry">未婚</label> <input type="radio" name="abc" id='married'>
<label for="married">已婚</label> <input type="radio" name="abc" id='secrecy'>
<label for="secrecy">保密</label>
<br><br> 兴趣爱好: <input type="checkbox" checked id='aw'>
<label for="aw">抽烟</label> <input type="checkbox" checked id='ax'>
<label for="ax">喝酒</label> <input type="checkbox" id='ae'>
<label for="ae">烫头</label>
<br><br> 个人介绍: <br><br>
<textarea cols="30" rows="10"></textarea> <!--textatea 区域文本框-->
<h2>我承诺</h2>
<ul> <!--无序类别的应用-->
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚选择另一半</li>
</ul> <br>
<input type="checkbox">我同意所有条款 <br>
<input type="submit" value="免费注册">
<input type="reset" >
</form>

html基础 表单相关属性综合实战案例 附有注释的更多相关文章

  1. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  2. bootstrap 基础表单

    表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑   LESS版本:对应源文 ...

  3. HTML表单__表单元素属性

    看完"HTML表单__表单元素"那一节的同学会发现,同是input标签,type属性值不一样的时候,input类型完全不一样.type就是input的一个属性,除type之外,还有 ...

  4. Bootstrap系列 -- 11. 基础表单

    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...

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

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

  6. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  7. 设置iframe内表单target属性以兼容IE、Firefox【转载】

    设置iframe内表单target属性以兼容IE.Firefox[转载] 2011年11月19日 haibor       今天有客户反应,在一产品网站的资源下载页面,用户登录提交后页面无反应! 经测 ...

  8. JavaScript | 基础表单验证(纯Js)

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  9. html/form表单常用属性认识

    1.form表单常用属性练习 <style> .form1 { margin: auto; height: 900px; width: 500px; text-align: center; ...

随机推荐

  1. zabbix实现对主机和Tomcat监控

    #:在tomcat服务器安装agent root@ubuntu:~# apt install zabbix-agent #:修改配置文件 root@ubuntu:~# vim /etc/zabbix/ ...

  2. 【Linux】【Services】【SaaS】Docker+kubernetes(6. 安装和配置ceph)

    1. 简介 1.1. 这个在生产中没用上,生产上用的是nfs,不过为了显示咱会,也要写出来 1.2. 官方网站:http://ceph.com/ 1.3. 中文网站:http://docs.ceph. ...

  3. BeanDefinitionLoader spring Bean的加载器

    spring 容器注册bean , 会把bean包装成beanDefinition 放进spring容器中,beanDefinitionLoader就是加载bean的类 . 一.源码 class Be ...

  4. Springboot,SSM及SSH的概念、优点、区别及缺点

    Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于像MAVEN这 ...

  5. RocketMQ应用及原理剖析

    主流消息队列选型对比分析 基础项对比 可用性.可靠性对比 功能性对比 对比分析 Kafka:系统间的流数据通道 RocketMQ:高性能的可靠消息传输 RabbitMQ:可靠消息传输 RocketMQ ...

  6. JVM堆空间结构及常用的jvm内存分析命令和工具

    jdk8之前的运行时数据区域 程序计数器 是一块较小的内存空间,它可以看做是当前线程所执行的字节码的行号指示器.每个线程都有一个独立的程序计数器,这类内存区域为"线程私有",此内存 ...

  7. MySQL数据库行转列

    一.数据源如下所示 二.对应SQL语句如下所示 -- 行转列 SELECT t1.`产品名称`, SUM(CASE t1.`日期` WHEN '2019-11-11' THEN t1.`数量` ELS ...

  8. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  9. linux小应用 —— 日志过滤

    先说问题,统计一个日志文件中去重之后的ip地址的个数.其实这是一个非常常见也比较简单的问题,其中我个人认为最主要的应该是匹配ip地址是这个问题的核心.剩下的就是对linux命令的熟练程度的问题了.首先 ...

  10. ubuntu 16.04下的fastadmin安装指南

    此篇博客转载于fastadmin论坛,方便自己看转到了博客里 说明文档不多,特制作一个,方便大家交流使用Ubuntu 16.04 安装fastadmin指南本文因考虑到大多数人员,习惯性在window ...