HTML表单设计

原创
2018/04/25 13:46
阅读数 234

<form></form>定义表单。

基本格式:<form action=”服务器端地址” name=”表单名称” method=”post/get”></form>

get方式:get方式提交时,会将表单的内容附加在URL的后面,所以限制了提交的内容长度,不超过8192个字符,且不具备保密性。

post方式:post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制。

action:表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为“no”.

enctype:设置表单的资料的编码方式

target:和超链接类似,用来指定目标窗口。

文本域和密码:

<input></input>:<input name=””  type=” ” value=” ” size=” ”maxlength=” ”></input>

Type:

 type=”text”表示文本输入域;

 type=”password”:密码输入域,会有星号隐藏密码显示;

 type=”submit”:提交按钮;

 type=”reset”:重置按钮;

 type=”button”为普通按钮。

 type=”redio”:单选框。Name相同的时候为一组选项

 type=”checkbox”:复选框.

 type=”hidden”;隐藏域

Name:控件名称,获取控件名称引用,document.getElementByName(“#name”) javascript的时候经常用到。
value:给控件赋值的时候使用或者默认值时候。

Size:设置控件长度。

Maxlength:输入框中允许输入最大字符数。

 注意:使用submit提交数据时,action没有指定地址method没有指定提交方式时,会自动默认get提交方式且获取name的值默认传递当前地址。

多行文本域:<textarea name=” ” value=” ” cols=” ” rows=” ”></textarea>

菜单下拉列表:

<select name=”xialakuang ”>

<option  >下拉选项1</option>

<option  >下拉选项2</option>

<option  >下拉选项3</option>

</select>

例子:

<form action="test.html" method="post">

    账号:<input type="text" name="zhanghao"/><br>

    密码:<input type="password" name="mima"/><br>

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

    <input type="reset" value="重置">

    <input type="button" value="普通按钮"/>

    <input type="radio" value="女" name="性别" checked/>

    <input type="radio" value="男" name="性别"/>

    <input type="radio" value="无" name="性别"/>

    <input type="checkbox" value="芒果"/>

    <input type="checkbox" value="橘子" checked/>

    <input type="checkbox" value="香蕉"/>

    <input type="checkbox" value="柚子"/>

    这是一个隐藏域:<input type="hidden" />

   自我介绍: <textarea name="多行" value="" cols="22" rows="22">

    </textarea>

    <select name="hahaah" >

       <option  value="sichuan" >下拉选项1</option>

       <option  selected>下拉选项2</option>

       <option  >下拉选项3</option>

     </select>

    </form>
展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部