HTML-form表单
Posted webdelovely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-form表单相关的知识，希望对你有一定的参考价值。
Form表单用于用户进行登录，注册，提交等场景，所有要提交的数据都必须放在form标签中 <form action=" " method=" ">；
action：提交地址、动作，与input标签中type标签的submit属性相关联。 <input type="submit" value="提交" />，提交地址是action的地址
method:提交方法，有get和post两种提交方法。
get方法：提交数据可以在URL中看见，
（1）以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数
（2）URL长度有限制，所以传递的参数数据就有限制
（3）由于数据可以看见，所以不安全
（4）网页默认的请求是get
post方法：
（1） 将form data 保存在http的请求
（2） 没有长度限制
（3） 提交的数据在url是看不到的，比较安全
（4） 往往在开发中用于提交数据form表单提交post
（5） 文件上传 method = post enctype=multipart/form-data
表单标签
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> New | 指定一个预先定义的输入控件选项列表 |
| <keygen> New | 定义了表单的密钥对生成器字段 |
| <output> New | 定义一个计算结果 |
input标签：输入框，其常用属性如下：
name：指定输入框名字，方便提交表格；
value：属性值，文本框内容；
placeholder：可用于文本框默认显示内容；
readonly：只读状态，输入框无法进行文字修改；
disabled：禁用状态；
size：由于输入框是单行的，所以只能设置宽度；
maxlength：限制输入框最大输入的字符个数；
type属性：
text：普通文本，默认属性；
password：文本密码，输入的内容不显示，通常用来设置密码；
submit：提交按钮；
checkbox：复选框，可以进行多项选择；
lable：单选框，多个关联选项name属性保持一致，<labke for=""></lable>:用于关联单选按钮与文字；
hidden：隐藏字段，不会在页面展示；
下拉框
select：下拉选择框，属性可以设置name，每个选项都有一个option，默认选中使用selected
籍贯：<select name="from">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
文本域
textarea：文本域，可以输入多行文本；
属性：
cols：列数(宽度)
rows：行数(高度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>form表单</title> </head> <body> <form> <!-- 文本框 --> 用户名：<input type="text" placeholder="请输入您的用户名"/> <input type="button" value="请点击"/><br /> 密码：<input type="password" placeholder="请输入您的密码"/> <input type="submit" value="请确认"/> <br /> <input type="hidden" value="隐藏"/> <!-- 复选框 --> 你喜欢什么水果？<br /> 苹果 <input type="checkbox" /><br /> 香蕉 <input type="checkbox" /><br /> 葡萄 <input type="checkbox" /><br /> <!-- 单选框 --> 请选择您的性别： <input type="radio" name="sex" id="nan" value="0"/ checked="a"><label for="nan">男 </label> <input type="radio" name="sex" id="nv"/><label for="nv">女</label> <br /> <!-- 下拉列表 --> 请选择你喜欢的科目： <select size="1" name="form"> <option>语文</option> <option selected="selected">数学</option> <option>英语</option> </select> </form> <!--文本域 --> <textarea cols="20" rows="20">请输入内容</textarea> </body> </html>
g
以上是关于HTML-form表单的主要内容，如果未能解决你的问题，请参考以下文章