html基础 表单相关属性综合实战案例 附有注释
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基础 表单相关属性综合实战案例 附有注释的更多相关文章
- HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...
- bootstrap 基础表单
表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑ LESS版本:对应源文 ...
- HTML表单__表单元素属性
看完"HTML表单__表单元素"那一节的同学会发现,同是input标签,type属性值不一样的时候,input类型完全不一样.type就是input的一个属性,除type之外,还有 ...
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
- bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- 设置iframe内表单target属性以兼容IE、Firefox【转载】
设置iframe内表单target属性以兼容IE.Firefox[转载] 2011年11月19日 haibor 今天有客户反应,在一产品网站的资源下载页面,用户登录提交后页面无反应! 经测 ...
- JavaScript | 基础表单验证(纯Js)
———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
- html/form表单常用属性认识
1.form表单常用属性练习 <style> .form1 { margin: auto; height: 900px; width: 500px; text-align: center; ...
随机推荐
- 为Python的web框架编写前端模版的教程
虽然我们跑通了一个最简单的MVC,但是页面效果肯定不会让人满意. 对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式.另外,jQuery作为操作DOM的JavaScr ...
- springboot-MVC 过滤器使用
一.前言 一下代码以SSO用户登录列子代码.完整代码https://gitee.com/xuxueli0323/xxl-sso 二.使用 2.1 创建过滤器 创建一个过滤器,实现Filter 接口 p ...
- 【dva】如何监听异步请求是否完成(页面loading)
方案1.你可以在model里面操作 在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为fals ...
- ASP.NET VS 调试提示:指定的端口正在使用中,建议切换到xxx之外并大于1024的端口
问题描述 使用 Visual Studio 开发 ASP.NET 网站的过程中,突然提示端口被占用: 解决方式 在启动项目上右键→属性,切换到 Web .直接修改服务器栏目里面的端口号,解决!
- Table.Combine追加…Combine(Power Query 之 M 语言)
数据源: 销量表和部门表 目标: 其中一表的数据追加到另一表后面,相同列直接追加,不同列增加新列 操作过程: 选取销量表>[主页]>[追加查询]/[将查询追加为新查询]>选择要追加的 ...
- 「Python实用秘技03」导出项目的极简环境依赖
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...
- CF1006B Polycarp's Practice 题解
Content 给定一个长度为 \(n\) 的数列,试将其分成 \(k\) 段,使得每一段中的最大值的和最大. 数据范围:\(1\leqslant k,n,a_i\leqslant 2000\). S ...
- Tornado 的安全性保障机制Cookie XSRF跨站请求伪造阻断 &用户验证机制
6.1 Cookie 对于RequestHandler,除了在第二章中讲到的之外,还提供了操作cookie的方法. 设置/获取 注意:Cookie 在浏览器调试时, 只有在第一次访问该网站的时候获取到 ...
- Spring学习(三)几种集合属性的注入方式
1.前言 众所周知.java中不只有八大简单类型.还有一些集合类型.本文围绕集合类型的注入做一个总结. 2.项目骨架 3.过程 1.创建实体类AllCollectionType package com ...
- JS验证身份证是否符合规则
调用isIdCardNo(num) 验证通过返回true 错误返回false function isIdCardNo(num) { var factorArr = new Array(7, 9, 1 ...