表单是用户通过网页将数据提交到服务器的媒介。

<form action="服务器路径" method="post">

内容

</form>代表一个表单的意思

今天我学到表单里面的12个元素:

文本类: text 文本框

password 密码框

<textarea></textarea> 文本域

hidden 隐藏域

按钮类: button 普通按钮

submit 提交按钮

Reset 重置按钮

image 图片提交按钮

选择类: radio 单选类

checkbox 复选类

<select>

<option>内容1<option/>

<option>内容2<option/>

</select> 下拉列表

file 上传文件/图片

文本类text 文本框

1 <body>
2     <form>
3         <input type="text" />  <br /><br />
4         <input type="text" value="我的名字" />  <br /><br />
5         <input type="text" value="" placeholder="请用户输入姓名" />
6 
7     </form>
8 
9 </body>
View Code

text文本框 是请用户输入文本类的数据

value是系统默认 网页显示出来的内容

placeholder 是提示用户输入内容,用户输入内容会消失

文本类 password 密码框

1 <body>
2     <form>
3         <input type="password" />  <br /><br />
4         <input type="password" value="我的密码" />  <br /><br />
5         <input type="password" value="" placeholder="请用户输入密码" />
6 
7     </form>
8 
9 </body>
View Code

password是给用户输入的内容用密码形式显现出来

value 和 placeholder同上

文本 texarea 文本域

<textarea></textarea>

一个小文本 让用户输入 例如:个人宣言 评论 等等

文本 hidden隐藏域

1 <input type="hidden">
View Code

不是让用户看的 是网页把一堆隐藏的数据打包发送服务器

按钮类 button 普通按钮

1     <form>
2         <input type="button" />   <br /><br />
3         <input type="button" value="哈哈" />  
4 
5     </form>
View Code

是让用户点击按钮的 value是给用户显示一个按钮的名称

按钮 submit 提交按钮

1 <form>
2         <input type="submit" />   <br /><br />
3         <input type="submit" value="哈哈" />  
4 
5     </form>
View Code

点击按钮会把数据打包发送到服务器上 value同上

按钮类 Reset 重置按钮

1  <form>
2         <input type="reset" />   <br /><br />
3         <input type="reset" value="哈哈" />  
4 
5     </form>
View Code

点击重置按钮会把用户输入的内容清空 回到刚开始打开页面的初始状况

value 同上

按钮类 image图片按钮

<input type="image" src="图片路径">

点击图片 会把用户输入的内容发送到服务器上去

选择类 radio 单选

 1     <form>
 2         <input type="radio" name="sex"   /> 3         <input type="radio" name="sex" /><br /><br />
 4 
 5         <input type="radio" name="sex1" id="nan" />
 6         <label for="nan"></label>
 7 
 8         <input type="radio" name="sex1"id="nv" />
 9         <label for="nv"></label>          <br /><br />
10 
11         <input type="radio" name="sex2" checked="checked" id="nan1" />
12         <label for="nan1"></label>
13         <input type="radio" name="sex2"  id="nv1" />
14         <label for="nv"></label>
15     </form>
View Code

第一行选择是 只能点击圈内的选择 name是在同一组中

第二行选择是 圈 文字 选择 给数据 id(身份号) 点击id 相当点击的内容

第三行是默认选择男 checked="checked" 默认选择

选择类 checkbox 复选类

 1    <form>
 2         <input type="checkbox" name="da"  id="zuqiu" checked="checked" value="zuqiu"/>
 3         <label for="zuqiu">足球 </label> 
 4         <input type="checkbox" name="da"  id="pingpang" value="pingpang"/>
 5         <label for="pingpang">乒乓球</label> 
 6         <input type="checkbox" name="da"  id="lanqiu"  value="lanqiu"/>
 7         <label for="lanqiu">篮球</label> 
 8         <input type="checkbox" name="da"  id="paiqiu" value="paiqiu"/>
 9         <label for="paiqiu">排球</label>
10         </form> 
View Code

id label checked 同上

value是给选择按钮 赋予一个值 要使用编程的时候使用到 不是给用户看的

选择类 select option下拉列表

1 <form>
2         <select>
3             <option value="1">购物车</option>
4             <option value="2">收藏的东西</option>
5             <option value="3">喜欢的东西</option>
6         </select>
7         </form> 
View Code

系统默认选第一个内容

上传文件 file

<input type="file">

下载文件 用超链接就可以

例如:

<a href="文件路径" >下载名字</a>

优质内容筛选与推荐>>
1、JavaScript高级程序设计之函数表达式
2、UIImage保存为JPG,PNG的方法
3、容器中的诊断与分析1——简介
4、SHELL编程
5、with nocheck ; nocheck


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn