html: form表单

form表单

form表单用于向服务器传输数据，从而实现用户与Web服务器的交互。

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea、select、fieldset和 label标签。

<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
    <p>用户名:
        <input name="name" type="text"  value="小强">
        <input name="name" type="text"  placeholder="小强" disabled>
    </p>
    <p>
        <label for="i1">用户名:</label>
        <input id="i1" name="name" type="text"  value="小强">

        <input name="name" type="text"  placeholder="小强" disabled>
    </p>
    <p>密码:
        <input name="password" type="password">
    </p>

    <p>邮箱:
        <input type="email" name="email">
    </p>

    <p>
        <input type="hidden" value="hidden">
    </p>

    <p>性别:
        <input name="gender" type="radio" value="1"> 男
        <input name="gender" type="radio" value="0"> 女
        <input checked name="gender" type="radio" value="2"> 保密
    </p>

    <p>性别2:
        <label for="r1">男</label>
        <input id="r1" name="gender" type="radio" value="1">

        <label>男
            <input name="gender" type="radio" value="1">
        </label>

        <label for="r2"> 女</label>
        <input id="r2" name="gender" type="radio" value="0">

        <label for="r3">保密</label>
        <input id="r3" checked name="gender" type="radio" value="2">
    </p>

    <p>爱好:
    <input checked name="hobby" type="checkbox" value="basketball">篮球
    <input name="hobby" type="checkbox" value="football">足球
    <input checked name="hobby" type="checkbox" value="doublecolorball">双色球
    </p>

    <p>生日:<input name="birthday" type="date"></p>

    <select name="from1" id="s1">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="sc">四川</option>
    </select>


    <select name="from1" id="s11" multiple>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sc">四川</option>
    </select>


    <select name="from2" id="s2">
        <optgroup label="北京">
            <option value="cp">昌平</option>
            <option value="cy">朝阳</option>
            <option value="hd">海淀</option>
            <option value="ft">丰台</option>
        </optgroup>
        <optgroup label="上海">
            <option value="pdxq">浦东新区</option>
            <option value="mhq">闵行区</option>
            <option value="hpq">黄浦区</option>
        </optgroup>
        <optgroup label="四川">
            <option value="pzh">攀枝花</option>
            <option value="zg">自贡</option>
            <option value="my">绵阳</option>
        </optgroup>
    </select>

    <p><textarea name="info" id="t1" cols="30" rows="10">
        
    </textarea></p>
    
    <p>头像:
        <input name="lp" type="file">
    </p>
    <p><input type="submit" value="提交s9"></p>

    <p><input type="button" value="button"></p>

    <p><input type="reset" value="reset"></p>

</form>

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

input标签

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

• name：表单提交时的“键”，注意和id的区别
• value：表单提交时对应项的值
  • type="button", "reset", "submit"时，为按钮上显示的文本内容
  • type="text","password","hidden"时，为输入框的初始值
  • type="checkbox", "radio", "file"，为输入相关联的值
• checked：radio和checkbox默认被选中的项
• readonly：text和password设置只读
• disabled：所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

• multiple：布尔属性，设置后为多选，否则默认单选
• disabled：禁用
• selected：默认选中该项
• value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

• name：名称
• rows：行数
• cols：列数
• disabled：禁用