5.表单

表单

form

<form method="post" action="">
    名字：<input name="name" type="text"/>
    密码：<input name="pass" type="password"/>
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重置"/>
</form>

action：表示向何处发送表单数据，表单提交的位置可以是网站，也可以是一个请求处理地址

method：规定如何发送表单数据，提交方式post，get

​ get：url中看到我们提交的信息，不安全，高效，不能传输大文件

​ post：url中看不到提交的信息，比较安全，可以传输大文件

input

属性

属性	说明
type	指定元素的类型。text，password，checkbox（复选框），radio（单选框），submit，reset，file，hidden，image，button等，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

单选框

<p>
    性别：
    <!--checked:默认选中-->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

（注意使用name分组）

多选框

<p>
    爱好：
    <!--checked:默认选中-->
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>敲代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby" checked/>游戏
</p>

按钮

<p>
    <input type="button" value=""/>
    <input type="image" src=""/>
    <input type="submit"/>
    <input type="reset" value="重置"/>
</p>

button：普通按钮

image：图像按钮

submit：提交按钮

reset：重置按钮

文件域

<p>
    <input type="file" name="files"/>
</p>

简单邮件验证

<P>
    邮箱：
    <input type="email" name="email"/>
</P>

url

<p>
    <input type="url" name="url"/>
</p>

数字

<p>
    商品数量：
    <input type="number" name="num" max="最大值" min="最小值" step="每次增加多少数"/>
</p>

滑块

<p>
    滑块（音量）
    <input type="range" name="voice" min="0" max="100" step="1"/>
</p>

搜索框

<p>
    搜索：
    <input type="search" name="search"/>
</p>

下拉框

<p>
    国家：
    <select name="列表名称">
        <!--selected:设置默认值-->
        <option value="china" selected>中国</option>
        <option value="USA">美国</option>
        <option value="jp">日本</option>
        <option value="Rs">俄罗斯</option>
    </select>
</p>

文本域

<p>
    反馈：
    <textarea name="textarea" cols="" rows=""></textarea>
</p>

cols：行数 tows：列数

表单的应用

设置表单框为只读：添加属性***readonly***

名字：<input type="text" value="admin" name="name" readonly/>

设置表单框为禁用：添加属性***disabled***

男： <input type="radio" value="boy" name="sex" disabled/>

<input type="submit" value="提交" name="submit" disabled/> 

设置表单框为隐藏：添加属性***hidden***

增强鼠标可用性

点击文字，光标跳到表单框中

<p>
    <label for="first">点击跳转</label>
    <input type="text" id="first"/>
</p>