码迷,mamicode.com
首页 > 其他好文 > 详细

表单的制作:基础知识

时间:2016-08-28 16:15:03      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

<form action="" method="POST">//action后是链接地址,表单发送的位置;method是表单发送的方法,POST是常用的方法。

//表单的每个输入属性都会有一个“name”,在提交了之后,浏览器会使用这些唯一的名字打包所有的数据。


 

输入框:<input type="text" name="firstname" value="">//输入框内输入的类型是文本;name是表单的名字,会在服务器脚本中使用到;

按钮:<input type="submit">// 设置value属性可以让按钮上显示不同的字。

技术分享


 

单选钮:

<input type="radio" name="yesorno" value="yes">yes //每一组单选钮中需要有同样的“name”

<input type="radio" name="yesorno" value="no">no

技术分享

复选钮:

<input type="checkbox" name="spice" value="apple">apple<br>
<input type="checkbox" name="spice" value="pear">pear<br>
<input type="checkbox" name="spice" value="banana">bananae<br>

技术分享


 

多行文本:

<textarea name="conmments" rows="30" cols="50"></textarea>//name:表单唯一的名字;rows:列的字符数;cols:行的字符数


 

下拉菜单:

<select name="fruit">
<option value="apple">apple</option>
<option value="pear">peAR</option>
<option value="banana">banana</option>
</select>

技术分享

技术分享


 

数字输入:
<input type="number" max="20" min="1">//旁边有箭头,可以增加或减少数字

技术分享

范围输入:

<input type="range" max="20" min="1">

技术分享


//当浏览器不支持颜色和日期时,会得到一个简单的输入框

颜色输入:
<input type="color>

日期输入:

<input type="date">


<input type="tel">//电话
<br>
<input type="email">//邮件
<br>
<input type="url">//网址

//这三种输入方式在桌面浏览器上没有区别,但在移动浏览器上,可以得到定制的专属键盘。

 

 

 

 

  

 

 

表单的制作:基础知识

标签:

原文地址:http://www.cnblogs.com/Thelma/p/5815163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!