form表单

 

1.什么时候使用form表单，在需要前端与后端数据交互的时候会使用form表单，用户在浏览器上填写的数据包装一下后，发送到后端，后端操作数据库给前端响应。需要提交数据时使用。

 

2.form是一个容器，放一些东西，让用户去填写，去选择。然后可以提交数据给后端，前端与后端交互

 

3.form表单提交数据的几个注意事项

（1）所有获取用户输入的标签都必须放在form表单里面

（2）用form标签中的action属性指定该form表单的内容提交到哪个位置去，action指定的一般都是一个网址。action控制往哪提交

（3）input/select/textarea 提交数据标签中必须有name属性，name属性表示键值对的键值，将来提交到后端时，后端可以根据键值来区分这个input标签代表的是什么含义。

（4）提交的数据标签中的value标签，表示键值对的值。

 （5）必须有提交按钮 <input type="submit">

（6）如果提交的表单中有文件，则还要为form的method属性和enctype加上指定值。<form action="" method="post" enctype="multipart/form-data">

4.小总结

（1）input系列：type类型可以为

　　text　　表示用户输入文本

　　　　value 设置默认值

　　　　placeholder 设置背景显示的字样

　　password　　表示用户输入的密码文本，输入后为密文显示

　　radio　　单选框

　　checkbox　　多选框

　　date　　日期

　　datetime　　时间

　　file　　文件

　　button　　普通按钮，一般用于js，js来给他绑定事件

　　reset 　　重置按钮，点击后会重置表单中的内容

　　submit　　提交按钮，用于提交表单内容到action指定的位置

　　什么时候用 Input框中的hidden属性。

（2）textarea　　大段的文本框

（3）select 下拉菜单选择框

　　　　option 具体的下拉选项

　　　　optgroup 分组的下拉框

　　　　　　option

　　　　　　option

5.form补充属性：

 

 6.form中的input标签

 

 

 

 7，form表单中的select标签

 

8.form表单中的label标签

9.form表单中的textarea标签

t

 

10.form表单的示例

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form表单示例</title>
</head>
<body>

<form action="" method="" enctype="">    <!-- 数据相关的东西放到form表单中， 用于存放数据-->
    <input type="text">     <!-- input标签 type为text时，表示文本输入的标签，用来获取用户填写的数据 -->
    <input type="submit">   <!-- input标签，type为submit时，表示提交按钮的标签-->
</form>


<!-- 注册示例-->    <!-- autocomplete属性表示输入表单时有自动补全功能，只要曾经输入过，设置为off表示关闭自动补全功能.  novalidate有了后表示不验证表单内容输入的合法性 -->
                <!-- action属性指定该form表单提交时，是提交到哪里去，一般是一个网址.method属性表示get还是post请求.上传文件的话就是post请求。 enctype为multipart/form-data用于上传文件.-->
<form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
    <p>用户名:
        <input name="username" type="text"> <!-- name还表示键值对的键值，用于提交到后端时，后端区分该提交的内容是什么含义的 -->
    </p>
    <p>
        <label for="1">用户名:</label>     <!-- 正规写法的一种，这时点击用户名字样时，就可以选中输入框了 -->
        <input id="1" name="username" type="text"> <!-- name还表示键值对的键值，用于提交到后端时，后端区分该提交的内容是什么含义的 -->
    </p>
    <p>
        <label>用户名哈哈
            <input name="username" type="text">
        </label> <!-- 正规写法的第二种，点击用户名字样时，就可以选中输入框了 -->
    </p>
    <p>密码：
        <input name="password" type="password">     <!-- type为password时，表示为让用户输入密码的文本标签，输入的密码是隐式的 -->
    </p>
    <p>性别：
        <label>男
            <input name="gender" type="radio" value="0">
        </label><!-- radio表示可以选择的小圈 同一name下的选择按钮只能选择一个,name还表示同一组 -->
        <label>女
            <input name="gender" type="radio" value="1">
        </label><!-- input作为radio用时，value属性的值，表示提交到后端时，键值对的值， -->
    </p>
    <p>性别：
        <label for="r1">男</label>
        <input id="r1" name="gender" type="radio" value="0">  <!-- radio表示可以选择的小圈 同一name下的选择按钮只能选择一个,name还表示同一组 -->
        <label for="v1">女</label>
        <input id="v1" name="gender" type="radio" value="1">  <!-- input作为radio用时，value属性的值，表示提交到后端时，键值对的值， -->
    </p>
    <p>爱好:
        <input name="hobby" type="checkbox" value="basketball">篮球  <!-- checkbox表示多选，inout作为checkbox使用时，value表示键值对的值 -->
        <input name="hobby" type="checkbox" value="football">足球
        <input name="hobby" type="checkbox" value="doublecolorball">双色球
    </p>
    <p>生日：<input name="birthday" type="date"></p>   <!-- date表示时间标签 -->
        <p>选择来自哪里
        <select name="fromaddress" id="suibian">  <!-- select为选择标签 -->
            <optgroup label="北京">   <!-- optgroup标签标示选择标签中的层级,分组下拉框 -->
                <option value="cp">昌平</option>    <!-- option为选择标签中的可以选择的内容 -->
                <option value="hd">海淀</option>
                <option value="ft">丰台</option>
                <option value="cy">朝阳</option>
            </optgroup>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="jl">吉林</option>
        </select>
    </p>
    <p>选择来自哪里
        <select name="fromaddress" id="suibian" multiple>  <!-- select为选择标签 multiple属性表示可以多选 -->
            <optgroup label="北京">   <!-- optgroup标签标示选择标签中的层级,分组下拉框 -->
                <option value="cp">昌平</option>    <!-- option为选择标签中的可以选择的内容 -->
                <option value="hd">海淀</option>
                <option value="ft">丰台</option>
                <option value="cy">朝阳</option>
            </optgroup>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="jl">吉林</option>
        </select>
    </p>
    <p><!-- textarea表示可以输入很多信息的文本框 -->
        <textarea name="jianjie" id="suibian1" cols="30" rows="10">

        </textarea>
    </p>
    <p>邮箱：
        <input name="email" type="email">   <!-- 输入邮箱的框 如果form表单有了novalidate了，则不会进行验证提示输入的合法性-->
    </p>
    <p>只读的：
        <input type="text" readonly value="哈哈"> <!-- readonly表示只读的，使用value为这个输入框给了个默认值 -->
    </p>
    <p>背景有值
        <input type="text" placeholder="最长长度16">    <!-- 设置背景显示的字样 -->
    </p>
    
    <p>头像
        <input name="tp1" type="file">
    </p>
    <p>button <input type="button" value="button"></p> <!-- button按钮 -->
    <p><input type="reset" value="重置"></p> <!-- 重置按钮，点击后会重置该表单的内容 -->
    <p><input type="submit" value="提交信息"></p>  <!-- 有了value后，表示此提交标签显示为提交信息字样。submit是提交form表单内容用的按钮-->

</form>
</body>
</html>

 

posted @ 2018-12-02 12:36  _小溢  阅读(775)  评论(0)    收藏  举报