首页 > 代码库 > 表单的制作:基础知识

表单的制作:基础知识

<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="http://www.mamicode.com/yes">yes //每一组单选钮中需要有同样的“name”

<input type="radio" name="yesorno" value="http://www.mamicode.com/no">no

技术分享

复选钮:

<input type="checkbox" name="spice" value="http://www.mamicode.com/apple">apple<br>
<input type="checkbox" name="spice" value="http://www.mamicode.com/pear">pear<br>
<input type="checkbox" name="spice" value="http://www.mamicode.com/banana">bananae<br>

技术分享


 

多行文本:

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


 

下拉菜单:

<select name="fruit">
<option value="http://www.mamicode.com/apple">apple</option>
<option value="http://www.mamicode.com/pear">peAR</option>
<option value="http://www.mamicode.com/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">//网址

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

 

 

 

 

  

 

 

表单的制作:基础知识