label、input、table标签

<label>标签

  1. <form>
  2. <label for="male">Male</label>
  3. <input type="radio" name"sex" id="male"/>
  4. <br>
  5. <label for="femal">Female</label>
  6. <input type="radio" name="sex" id="female"/>
  7. </form>

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<input>

文本域:<input type="text" name=" ">

密码域:<input type="password" name=" ">

复选框:<input type="checkbox" name=" "><input type="checkbox" name=" ">

单选框 : <input  type="radio" checked="checked" name="sex" value="male">

<input type="radio"  name="sex" value="female">

name值相同

下拉列表:

  1. <form>
  2. <select name="cars">
  3. <option value="volvo">volvo</option>
  4. <option value="saab">saab</option>
  5. <option value="fiat">fiat</option>
  6. <option value="audi">audi</option>
  7. </select>
  8. </form>

带预选值的下拉列表:添加selected="selected"

文本域:<textarea rows="10" cols="30">this</textarea>

按钮: <input type="button" value="Hello world">

围绕数据的Fieldset:绘制一个带标题的框:

  1. <form>
  2. <fieldset>
  3. <legend>健康信息</legend>
  4. 身高:<input type="text">
  5. </fieldset>
  6. </form>

带有输入框和确认按钮的表单

  1. <form action="/example/html/form_action.asp" method="get">
  2. <p>First name:<input type="text" name="fname"></p>
  3. <p>Last name:<input type="text" name="lname"></p>
  4. <input type="submit" value="submit">
  5. </form>
  6. <p>请单击确认按钮,输入会发送到服务器上名为"form_action.asp"的页面。</p>

将输入框改为复选框可提交

从表单发送电子邮件

  1. <form action="MAILTO:[email protected]" method="post" enctype="text/plain">
  2. <h3>这个表单会把电子邮件发送到W3School。</h3>
  3. <input type="text" name="name" value="yourname" size="20">
  4. <input type="text" name="mail" value="yourmail" size="20">
  5. <input type="text" name="comment" value="yourcomment" size="40">
  6. <input type="submit" value="submit">
  7. <input type="reset" value="reset">
  8. </form>

<tabel>标签

<tr><td></td><td></td></tr>一行两列

表格边框<table border="1"></table>

border的值表示边框大小

表头:<th></th>代替<td></td>  <th></th>中的字体自动加粗

带有标题的表格<caption></caption>

跨列:<td colspan="2"></td>

跨行:<td rowspan="2"></td>

cellpadding=" "表单填充

cellspadding     单元格填充

向表格添加背景颜色或者背景图像

<table border="1"  bgcolor="red"></table>

<table border="1"  bgckground=" "></table>

时间: 2024-10-18 01:15:07

label、input、table标签的相关文章

区别CSS中display:box;inline;none以及HTML中 &lt;frame&gt; 标签&lt;table&gt; 标签的 frame 属性

区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内容自动换行;行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度:<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子,意思是他们默认显示方式是block: display:inl

html5 填表 表单 form label input button legend fieldset

<form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性post一般用表单提交, 而get 一般用超链接提交. 如果用post提交百度就会出错.或者返回的链接不会带有?user= <form method="post" action="http://www.baidu.com"> <input name="

table标签里插入form标签的奇怪现象

最近帮朋友处理它的表单无法提交的问题,弄了些时间,发现了一个奇怪的问题 <table> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="text" name="t" /> <input type="submit" value=&

&lt;table&gt;标签总结(colspan跨列 ,rowspan跨行)

table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" summary="各银行的网上银行支付限额总表"> 1.摘要summary的内容是不会在浏览器中显示出来的.它的作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容. 2.

&lt;table&gt;标签里的caption标签和H标签的区别

实例 带有标题的表格: <table border="1">  <caption>Monthly savings</caption>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td> 

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$("#file")[0].value = null; [×]$("#file").attr("value",""); [×]$("#file").attr("value",null); [√]$(&

WEB前端开发学习----2.HTML表格table标签

[html] view plaincopy css没用流行之前,网页都是用表格,也就是table标签制作的.虽然现在不用table做网页了,但是我们还是应该掌握这个标签.</span> 先给出最表格的基本格式: [html] view plaincopy <table> <tr> <tb> </tb> </tr> <table> 其中<tr>为行标签,即表格的行.<td>为单元格数据标签.也就是说一

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

label+input实现开关切换效果

Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px); .ipt:checked + .box .switch-btn { left: 0; } 当然要配合transition来实现 下面是效果 ON OFF 全部css代码 .ipt { display: none; } .box { width: 74px; height: 30px; line