form表单的标签

　　做一个如下图的form表单：

　　

　　我们的代码如下：

　　　　

<body leftmargin="400px" topmargin="200px">

<form method="post" action="http://www.baidu.com">

<table border="2px" heigth="200px">

<tr>

<td align="right">用户名：</td>

<td>

<input type="text" name="" id="" value="" placeholder="请输入用户名" />

</td>

</tr>

<tr>

<td align="right">密码：</td>

<td>

<input type="password" name="" id="" value="" placeholder="请输入密码"/>

</td>

</tr>

<tr>

<td align="right">确认密码：</td>

<td>

<input type="password" name="" id="" value="" placeholder="请再次输入密码"/>

</td>

</tr>

<tr>

<td align="right">验证码：</td>

<td>

<input type="text" name="" id="" value="" placeholder="请输入验证码" /><img src="1.gif" width="30px"/>

</td>

</tr>

<tr>

<td align="right">性别：</td>

<td>

<input type="radio" name="r1" id="r1" checked="checked" value="" />

<lable for="r1">男</lable>

<input type="radio" name="r1" id="r2" value="" />

<lable for="r1">女</lable>

</td>

</tr>

<tr>

<td align="right">年龄：</td>

<td>

<input type="text" name="" id="" value="" placeholder="请输入年龄"/>

</td>

</tr>

<tr>

<td align="right">爱好：</td>

<td>

<select name="" id="si" size="1" multiple="multiple">

<option value="">购物</option>

<option value="">上网</option>

<option value="">运动</option>

<option value="">看电影</option>

<option value="">听音乐</option>

</select> 

</td>

</tr>

<tr>

<td align="right">你喜欢的游戏：</td>

<td>

<input type="checkbox" name="" id="c1" value="b1" />

<label for="c1">穿越火线</label>

<input type="checkbox" name="" id="c2" value="b2" checked="checked"/>

<label for="c2">英雄联盟</label>

<input type="checkbox" name="" id="c3" value="b3" />

<label for="c3">逆战</label>

<input type="checkbox" name="" id="c4" value="b4" />

<label for="c1">守望先锋</label>

</td>

</tr>

<tr>

<td align="right">邮箱：</td>

<td>

<input id="" name="" value="" placeholder="请输入邮箱" />@qq.com7

</td>

</tr>

<tr>

<td align="right">邮箱密码：</td>

<td>

<input type="password" name="" id="" value="" placeholder="请输邮箱入密码"/>

</td>

</tr>

<tr>

<td align="center">

<input type="submit" name="" id="" value="提交" />

</td>

<td>

<input type="reset" name="" id="" value="重置"/>

</td>

</tr>

</table>

</form>

</body>

form的常用标签和属性都有了，有什么问题多多交流。

form表单的属性标签和练习的更多相关文章

  1. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

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

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

  3. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  4. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

  5. 常用6种type的form表单的input标签分析及示例

    <input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...

  6. form 表单 enctype 属性-(转自w3c)

    <from action="xxx.xxx" enctype="multipart/form-data"></from> 在上传文件时必 ...

  7. Form表单，textarea标签输入框 字数限制，和已输入字数的统计显示

    <script type="text/javascript"> $(document).ready(function() { <%-- 页面进来时就调用 --%& ...

  8. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

  9. 在学习HTML——form表单中的label标签时的一点小体会

    在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解:  label 标签不会向用户呈现任 ...

随机推荐

  1. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

  2. ASP.NET MVC 3 技术(九) 301永久重定向不带www域名到带www的域名

    在 .net 4 中实现永久重定向非常容易,可以参考ASP.NET MVC3 技术(四) 永久重定向方法.今天主要说明下怎么在 asp.net mvc 3 实现从带www的域名永久重定向到不带www的 ...

  3. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  4. POJ_2386 Lake Counting （dfs 错了一个负号找了一上午）

    来之不易的2017第一发ac http://poj.org/problem?id=2386 Lake Counting Time Limit: 1000MS   Memory Limit: 65536 ...

  5. CodeAtlas For Sublime Text

    CodeAtlas is a plugin of SublimeText, which allows one to explore the call graph conveniently. The p ...

  6. Linux-./configure: error: the HTTP rewrite module requires the PCRE library.

    这个问题是要解决: yum -y install pcre-devel 然后在yum的时候发现出错.问题是我的linux不能上网. 这个问题搞得烦死了.和主机能ping.但是就是不能上网: ping ...

  7. [LeetCode] Same Tree 判断相同树

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  8. simpson

    使用二次函数拟合复杂的连续函数求积分 对于(l,r)拟合的积分为(r-l)*(f(l)+4*f((l+r)/2)+f(r))/6 ___________________________ BZOJ217 ...

  9. MSSQLSERVER

    create database test--创建数据库zh use test --打开数据库 go--执行 create table tab--创建表 ( UserName ),--创建字符串类型的字 ...

  10. 学习ASP.NET 5和MVC6

    今天很荣幸的参加了微软开源跨平台讲座,充分认识了下一个版本的ASP.NET所带来的激动人心的特性.虽然过去已经断断续续的了解了一些ASP.NET5和MVC6与EF7的动态,但是都没有这一次来的系统化( ...