Web前端(15)_input表单

1、label标签

点击用户名，直接跳到输入框里

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<label >用户名： <input type="text">  </label> <br />
<label >用户名： <input type="text">  </label> <br />
<label >用户名： <input type="text">  </label> <br />
<label >用户名： <input type="text">  </label> <br />
<label >用户名： <input type="text">  </label> <br /></body>
</html>

View Code

2、for和id结合，不常用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<label >用户名： <input type="text">  </label> <hr />
<label for="pwd">用户名： <input type="text">密码： <input type="password" id="pwd">
</label>
</body>
</html>

View Code

3、表单练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><base target="_blank_"/>
</head><body><table width="600" border="0" cellpadding="0" cellspacing="0" align="center" ><caption><h4>青春不常在，抓紧谈恋爱</h4></caption><tr><td>所在地区</td><td><input type="text"  value="北京"/></td></tr><tr><td>用户名</td><td><input type="text" value="andy" maxlength="8"></td></tr><tr><td>密码</td><td><input type="password" value="andy" /></td></tr><tr><td>性别</td><td>男 <input type="radio" name="sex" />女 <input type="radio" name="sex" checked="checked"/></td></tr><!-- 以下是年龄  --><tr height="60"><td>年龄</td><td><select value="" id="1"><option value="">选择年份</option><option value="">1990</option><option value="">1991</option><option value="" selected="selected">1992</option><option value="">1993</option><option value="">1998</option></select><select value="" id="1"><option value="">选择月份</option><option value="">1月</option><option value="">2月</option><option value="">3月</option><option value="">6月</option><option value="">7月</option></select></td></tr><tr><td>喜欢的类型</td><td>妩媚 <input type="checkbox" name="girl" />成熟 <input type="checkbox" name="girl" />温柔 <input type="checkbox" name="girl" />小奶狗 <input type="checkbox" name="girl" />大叔 <input type="checkbox" name="girl" /></td></tr><tr><td>给我留言</td><td><textarea name="" id="" cols="50" rows="10">不支持富文本 </textarea></td></tr><tr><td></td><td><input type="button" value="注册"><input type="submit" value="提交"><input type="reset"  value="重置"></td></tr><tr><td></td>  <!-- 这个地方空着，不能删--><td><input type="image" src="../image/QQ截图20190324194537.png"></td></tr><tr><td>上传头像</td><td><input type="file" ></td></tr></table>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/sunnybowen/p/10590805.html

Web前端(15)_input表单相关推荐

Web前端之登录表单
仿照书上的例子写的一.HTML <!DOCTYPE html> <html lang="en"> <head><meta charset ...
Web前端 | HTML | 表格 | 表单
目录--今日任务表格关卡2 表单关卡3 表格表格由 <table> 标签来定义: 每个表格均有若干行,由 <tr> 标签定义: 每行被分割为若干单元格,由 <td ...
【Web前端HTML+CSS——表单知识点及相关案例】
文章目录表单元素 input元素 select元素 textarea元素按钮元素表单状态(可替换元素不能完全控制) 配合表单元素的其他元素 label datalist(存在兼容性问题,了解即可 ...
web前端培训 - HTML 表单基础知识
1. 创建表单每个表单都以 form 开始标签开始,以 form 结束标签结束.两个标签之间是组成表单的说明标签.控件和按钮.每个控件都有一个 name 属性,用于在提交表单时对数据进行识别.for ...
Web 网页求职兼职表单制作
Web 网页求职兼职表单制作 1. 表头 2. 个人信息 3. 求职意向 4. 自我评价 5. 完整代码如下结束语 1. 表头 <!-- align 文字位置 center 居中.left 左 ...
【前端基础】表单标签/提交
[前端基础]表单标签/提交表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码小结表单标签学习目标能够知道表 ...
怎么实现Web系统URL传输(表单提交)参数加密-zhuan
using System; using System.Security.Cryptography; using System.IO; using System.Text; namespace EIP. ...
组件库实战 | 教你如何设计Web世界中的表单验证
教你如何设计Web世界中的表单验证
获取form表单_【第1535期】前端 Form 的表单的一个通用解决方案
前言今日早读文章由阿里@布达投稿分享. @布达,Alibaba Fusion项目组的.花名潕量.主要专注在设计系统.组件.可视化搭建这个领域正文从这开始-- Fusion Next - Form ...

Web前端(15)_input表单

1、label标签

2、for和id结合，不常用

3、表单练习

Web前端(15)_input表单相关推荐

最新文章

热门文章