HTML标签--表单

HTML标签--表单

表单：
基本格式
<form>
<input>
...
</form>

表单属性：action、method

<!--action：表单数据提交地址
    method：用来指定数据传递到服务端的基本方法
    get：传递的数据会拼接到URL后面
    优点：简单，快速
    缺点：暴露敏感信息，数据传输量有限
    post ：传递数据会隐藏起来，放在请求体
    优点：数据传输量大，信息保密性好
    缺点：相比get请求速度较慢-->

表单元素：

<input>元素
<select>元素（下拉列表）
<textarea> 元素
<button> 元素
<datalist>元素（预定义下拉列表）
<keygen>元素
<output>元素

输入类型：

text：单行文本输入；<inputtype="text" name="firstname">
password：密码输入；<inputtype="password" name="password">
radio：单选；<inputtype="radio" checked="checked" name="Sex" value="male"/>
checkbox：多选；我喜欢自行车：<inputtype="checkbox" name="Bike">我喜欢汽车：
<input type="checkbox"name="Car">
reset：重置表单数据；<inputtype="reset" value="重置">
file：文件上传；<inputtype="file" value="files">
submit：提交表单数据；<inputtype="submit" value="提交">
image：图形提交按钮；<inputtype="image" src="“>
button：普通按钮；<inputtype="button" value="">

HTML5新输入类型 ：

email：限制用户输入email格式。
url：限制用户输入网址格式。
date：限制用户输入日期格式。
time：限制用户输入时间格式。
month：限制用户输入月份格式。
week：限制用户输入 周格式。
number：限制用户输入数字格式。
range：一个滑动条。
color ：选择颜色格式。

input属性：

value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性规定输入字段允许的最大长度
novalidate 属性属于 <form> 属性。
如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
height 和 width 属性
height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">。
注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
min 和 max 属性
min 和 max 属性规定 <input> 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
step 属性
step 属性规定<input> 元素的合法数字间隔。
示例：如果 step="3"，则合法数字应该是-3、0、3、6、等等。
提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
name="name" ：名字
tabindex="1" ：索引
required ：必填
placeholder="请输入姓名"：提示信息
autofocus：自动获取光标
autocomplete：自动完成补全
提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。
id：

表单外边框和标题：

<fieldset>
<legend>个人信息</legend>
<form>
...
</form>
</fieldset>
 

智能表单：

<form id=foo>
...
</form>
<input type="text" form="foo">

表单实例：

<formaction="www.123.com"method="get">
    <fieldset>
        <legend>个人信息</legend>
        <!--tableindex为指定索引顺序-->
        <!--required：必填-->
        <!--placeholder：提示信息-->
        <!--autofocu：自动获取光标-->
        <!--autocomplete：自动完成-->
    姓名：<input type="text" name="name" tabindex="1"  required placeholder="请输入姓名"
              autofocus autocomplete="off"><br>
    密码1：<input type="password" name="pwd" tabindex="4"><br>
    密码2：<input type="password" name="pwd" tabindex="3"><br>
    密码3：<input type="password" name="pwd" tabindex="2"><br>
    性别：<inputtype="radio" name="sex" value="1" id="man"> <label for="man">男</label>
         <input type="radio" name="sex" value="0" id="women"> <label for="women">女</label> <br>
    爱好：<inputtype="checkbox" name="hobby" value="basketball">篮球
         <input type="checkbox" name="hobby" value="score">足球
         <input type="checkbox" name="hobby" value="tennis">网球<br>
    附件：<inputtype="file" name="img"><br>
    图形按钮：<inputtype="image" src="../../img/jf1.jpg"height="30"><br>
    <input type="button" value="注册">
    <input type="submit" value="登录">
    <input type="reset" value="清空"><br>
    省份：<selectname="province" id="province">
            <option value="sd">山东省</option>
            <option value="sc">四川省</option>
            <option value="hn">河南省</option>
            <option value="hb">河北省</option>
            <option value="hn">湖南省</option>
            <option value="hn">重庆</option>
            <option value="hn">贵州省</option>
        </select><br>
    </fieldset>
    意见建议：<textarearows="10" cols="18" style="resize: none"></textarea>
</form>
<form action="">
    邮件：<inputtype="email"><br>
    网址：<inputtype="url"><br>
    日期：<inputtype="date"><br>
    时间：<inputtype="time"><br>
    月份：<inputtype="month"><br>
    星期：<inputtype="week"><br>
    数字：<inputtype="number" max="20" min="3" step="3"><br>
    滑动条：<inputtype="range"><br>
    颜色：<inputtype="color"><br>
    <input type="submit" value="提交">
</form>