前端笔记4（表单）

2019/4/3

1.表单

<form action="1.php" method="get"></form>

属性：action：处理信息
method=“get\post”
get 通过地址栏提供（传输）信息，安全性差
post 通过1.php来处理信息，安全性高

2.表单之下拉列表

<form action="1.php" method="post">
    <p>
        省（市）：<select>
                    <option>北京</option>
                    <option>上海</option>
                    <option selected="selected">四川</option>
                    <option>广东</option>
                 </select>
                 <select multiple="multiple">
                     <option>北京</option>
                     <option>上海</option>
                     <option selected="selected">四川</option>
                     <option>广东</option>
                 </select>
    </p>
</form>

multiple="multiple" 将下拉列表设置为多选项
selected="selected" 设置默认选中项

<p>
        市（区）：<select >
        <optgroup label="四川省">
            <option>成都市</option>
            <option>广元市</option>
            <option>达州市</option>
            <option>都江堰市</option>
        </optgroup>
        <optgroup label="世界省">
            <option>成都市</option>
            <option>广元市</option>
            <option>达州市</option>
            <option>都江堰市</option>
        </optgroup>
        </select>
    </p>

<optgroup label="世界省"></optgroup> 为下拉列表分组

3.表单文件上传

文件上传控件

<form>
<input type="file">
</form>

4.表单按钮

文件提交按钮


<input type="submit"><!--能直接提交-->

普通按钮

<input type="button" value="提交"><!--不能直接提交-->

图片按钮

<input type="image" src="img/photo.jpg"><!--能直接提交-->

重置按钮

<input type="reset"><!--一切回到默认-->

5.表单信息分组

<fieldset></fieldset>对表单信息分组
<legend>INFORMATION</legend>表单信息分组名称

6.表单控件

网址控件

<input type="url">

日期控件

<input type="date">

时间控件

<input type="time">

邮件控件

<input type="email">

数字控件

<input type="number" step="5">

滑块控件

<input type="range" step="10">