表单的相关知识

一、表单基本结构

1.<form> 表单

<form action>:用于指定表单的提交地址。（需要与后端人员沟通确定）

        eg：<form action="https://www.baidu.com/s">、

                <form action="https://search.jd.com/search">

<form action target="_self">在本页面下打开，_blank:在新建窗口下打开。

<form action target method>以后了解

2.<input>输入框

<input type="text">:以文本的方式输入。

 <input type  name="wd/keword/...">:需要与后端人员协定。

3.<buttom>按钮。 buttom的默认type属性是submit（提交）。

仅仅想要一个普通按钮就只需改变type的值为：buttom。

二、表单常用控件

<input type="text">

 账户：<input type="text" name="account" value="zhangsan" maxlength="10">

3.单选框

<input type="radio" name="sex" value="male" checked(表示按钮默认选项)>女

<input type="radio" name="sex" value="female">男

注意：单选框要有单选效果，多个radio的name属性要保持一致。

4.复选框：

         <input type="checkbox" name="hobby" value="smoke" checked>抽烟

        <input type="checkbox" name="hobby" value="drink" checked>喝酒

        <input type="checkbox" name="hobby" value="perm">烫头

5.隐藏域

<input type="hidden" name="tag" value="100">

服务器看不见的一个区域。

6.提交与重置

<button type="submit">确认</button>

<button type="reset">重置</button>

6.文本域

不能写文本属性。

<textarea name="other" cols="22" rows="5"></textarea>

name就是能够在网页上显示出来的名称，cols是控制列，row是控制行的。就相当于宽和高。

7.下拉框

<select name="place" >

            <option value="渝">重庆</option>

            <option value="沪">上海</option>

            <option value="杭">杭州</option>

            <option value="京" selected>北京</option>

        </select>

name:指定数据的名称。

option中如果没有value,那默认值就是option后面的数。

默认选项用selected。

8.禁用表单控件

使用范围：input、textarea、buttom、select、option。

        账户：<input disabled type="text" name="account" value="zhangsan" maxlength="10">

         表示该选项框已经有内容且不允许修改

9.label标签。

     label标签可与表单控件关联，关联之后其点击文字，同样有获取焦点的效果。

     两种方式：

    1.让label标签的for'属性的值等于表单控件的id。

     2.将表单控件嵌套在label里面。

10.filedset和legende

filedset:为表单控件进行分组。

legende：为标签分组的题目。

框架标签

iframe

可在网页中嵌入其他网站或文件。

也可以插入其他网站链接进行跳转。