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; ...
随机推荐
- 用oracle中的Row_Number实现分页
Row_Number实现分页 1:首先是 select ROW_NUMBER() over(order by id asc) as 'rowNumber', * from table1 生成带序号 ...
- 【Java 8】函数式接口(一)—— Functional Interface简介
什么是函数式接口(Functional Interface) 其实之前在讲Lambda表达式的时候提到过,所谓的函数式接口,当然首先是一个接口,然后就是在这个接口里面只能有一个抽象方法. 这种类型的接 ...
- python中的虚拟环境(在jupyter和pycharm中的使用)
1.通过anaconda新建虚拟环境 创建虚拟环境:conda create -n your_env_name python=3.6 激活虚拟环境:activate your_env_name(虚拟环 ...
- Quartz在.NET中的使用
一.背景 例如需要在某年某月去将数据库的某个数据更新或者同步,又或者是每隔一段时间来执行一部分代码去调用接口,但是又不想人为的手动去执行 针对此类业务可以使用"定时调用任务",市面 ...
- Sentry 开发者贡献指南 - 前端(ReactJS生态)
内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...
- Apache设置虚拟机端口
Apache虚拟机设置端口,以45184端口为例httpd-vhosts.conf文件NameVirtualHost *:45184<VirtualHost *:45184> Doc ...
- 【WP】攻防世界-杂项-Misc
长期更新一波 攻防世界 的杂项题解 这东西主要靠积累吧 攻防世界:https://adworld.xctf.org.cn 因为攻防世界的题目顺序经常变化,我也不改序号了,顺着之前写的位置往下写,推荐使 ...
- Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标
JavaFx中其实也可以直接使用字体图标iconfont的,只需要加载ttf字体文件,之后设置unicode即可,具体可以看我给出的代码 既然JavaFx可以,那么以JavaFx为基础的Tornado ...
- odoo14 继承改写原生模块的视图优先级问题
需要类似这样的改写方法: 1.更改id名,方便下方引用!!! 2.使用原生模块的"model"!!! 3.添加字段priority!!!(越小越大) 4.form 和 kanban ...
- CF688B Lovely Palindromes 题解
Content 输入一个数 \(n\),输出第 \(n\) 个偶数位回文数. 数据范围:\(1\leqslant n\leqslant 10^{10^5}\). Solution 一看这吓人的数据范围 ...