h5-文本框
h5-文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<!-- form是表单,内部可以包含多个控件,
控件内可以输入值。
我们是以表单为单元进行提交,一次要提交一个表单所包含所有控件的值。
表单只是用来定提交的范围。
表单是透明的。
#:表示无处可提交。在有服务器时可提交给服务器,即是填入服务器地址取代#。
-->
<form action="#">
<p>
<!-- 加标签:
在input里加入属性id,并起名“account”,设置文本框的唯一id,
而后,在“账号:”前加上lable for="文本框的id"来捆绑标签
从而实现,点击文字“账号:”也可以进行文本框输入。
-->
<label for="account">账号:</label>
<input type="texts" id="account"/>
</p>
<p>
<label for="password">密码:</label>
<input type="pwd" id="password"/>
</p>
<!-- 单选框:在input里添加属性name,让选项使用同名
互相排斥,即可实现单选
-->
<p>
性别:
<input type="radio" checked id="male" name="sex"/>
<label for="male">男</label>
<input type="radio" id="female" name="sex"/>
<label for="female">女</label>
</p>
<p>
兴趣:
<input type="checkbox" checked id="basketball">
<label for="basketball">篮球</label>
<input type="checkbox" id="football">
<label for="football">足球</label>
</p>
<p>
<!-- value:按钮的名称;button:需用js进行定义 -->
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="取消"/>
</p>
</form>
</body>
</html>
补充部分功能:
<!-- 文件选择提交框 -->
<label for="attachment">上传附件:</label>
<input type="file" id="attachment"/>
<!-- 文本域:大号文本框 -->
<p><label for="disc">自我介绍:</label></p>
<textarea id="disc"></textarea>
补充:
<!-- 下拉选择 -->
<label for="choseone">选择你要学习的课程:</label>
<select id="choseone">
<option>-请选择-</option>
<option value="1">html5</option>
<option value="2">js</option>
<option value="3">css</option>
</select>
h5-文本框的更多相关文章
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- H5页面设计器,仿有赞商城页面在线设计器,比富文本框更友好的内容编辑器
基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- Android 自学之自动完成文本框 AutoCompleteTextView
自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上他也是一个编辑框,但他比普通的编辑框多了一个功能:当用户输入一定字符后,自动完成文本框会显示一个下拉菜单,供 ...
- 文本框脚本 - select 事件
HTML中,用两种方式来表示文本框: input 单行文本.textarea 多行文本 那么在文本中存在哪些事件尼? 1 select 都支持 但是其触发的时机不一样 IE9+ .Safair ...
- Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。
一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:
- 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法
异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...
- jquery禁用文本框
禁用文本框 //文本框禁用 $("input[type='text']").each(function () { $("#" + this.id).attr(& ...
- input文本框录入字母自动大写
向文本框输入文字时,如何让小写字母自动变为大写呢?有一个简单有效的做法是用CSS. <input name="t1" type="text" style= ...
- 使input文本框随其中内容而变化长度的方法
最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- 解决kylin报错:Failed to create dictionary on <db>.<table>, Caused by: java.lang.IllegalArgumentException: Too high cardinality is not suitable for dictionary
报错信息: 2017-05-13 15:14:30,035 DEBUG [pool-9-thread-10] dict.DictionaryGenerator:94 : Dictionary clas ...
- intellij idea 热部署、热加载设置方法
https://blog.csdn.net/wangjun5159/article/details/55223630 https://blog.csdn.net/wangjun5159/article ...
- iOS:分段控件UISegmentedControl的详细使用
分段控件:UISegmentedControl 功能:分段的控制.页面的切换等. 介绍:当用户输入不仅仅是布尔值时,可使用分段控件(UISegmentedControl).分段控件提供一栏按钮 ...
- JStorm模型设计
问题描述 1.在流式计算中经常需要对一批的数据进行汇总计算,类似SQL中的GROUP BY.在用JStorm来实现这一条简单的SQL时,面对的是一条一条的数据库变化的消息(这里需要保证有序消费),其实 ...
- hdr rt format对颜色的影响
我刚刚终于理解为什么rendertarget的format对颜色的影响为什么那么大了 r8g8b8a8 这种会有band artifacts rgbafloat 这种浮点rt 的色带变化更为连贯(R ...
- How to publish a WordPress blog to a static GitLab Pages site
https://opensource.com/article/18/8/publish-wordpress-static-gitlab-pages-site A long time ago, I se ...
- 给ubuntu设置静态ip —— How to set static IP Address in Ubuntu Server 16.04
原文: http://www.configserverfirewall.com/ubuntu-linux/ubuntu-set-static-ip-address/ ----------------- ...
- Linux内核project导论——linux学习和职业曲线(刚開始学习的人,中级,高级都可參考)
Linux世界介绍 给自己定级 门外汉: 不会安装操作系统 不会用虚拟机(安装和使用) 入门级: 熟悉常见的发行版,甚至装过而且能用一些特殊发行版(比如kali)做过一些简单的图形界面的使用. 会一些 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何修改某个轴的数值单位
在某个轴上双击,切换到Settings,然后可以再Unit中修改为角度,弧度,mm 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/aceta ...
- webpack安装以及一些配置
在用webpack之前... 或说没有实现组件化之前的web1.0时代! 最终迈向web2..0之后的时代! ===============华丽的分割线================== 安装步骤有 ...