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时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengthtype为text或password时,输入的最大字符数
checkedtype为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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页