HTML表单

最新推荐文章于 2025-04-05 21:51:03 发布

青铜亡者

最新推荐文章于 2025-04-05 21:51:03 发布

阅读量130

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_43749262/article/details/109244886

版权

一、form属性

属性	解释
action	该属性值指定了提交表单时对应的服务器程序地址
method	指定表单中的输入数据的传输方式，取值是get或post，默认值是get,get或post会将表单中的数据发送到Web服务器上
enctype	指定表单中输入数据的编码方式
target	指定窗口的打开方式,常用的就是_self和_blank，与超链接的target属性一致

关于get和post的区别
（1)post更加安全
（2）post发送的数据更大（get有url长度限制）
（3）post能发送更多的数据类型
（4）post比get慢
（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类操作

详细原因点击查看

二、input

1.属性
本文只列举常用属性

属性	功能	属性	功能
name	定义输入控件名称	type	指定控件的类型，默认是text
size	规定控件输入域的大小	placeholder	给出文本框的占位字符串，可实现文本框水印的效果
checked	提供复选框和单选按钮的初始状态	value	提供控件输入域的初始值
required	规定是否是必填信息	src	定义以提交按钮形式显示的图像的URL

2.input的type属性及其含义

值	功能
text	单行的输入文本框，默认宽度20个字符
checkboxl	复选框，提供多选
radio	单选按钮，提供单项选择
submit	提交按钮，单击提交按钮会把表单中的数据发送到服务器上
time	时间输入
date	日期输入
range	范围输入
number	数字输入
password	密码字段，该字符安的字符用*替代
button	普通按钮，一般结合javascript设定自定义功能
resrt	重置按钮，把表单的所有数据恢复默认值
image	图像形式的提交按钮

部分功能代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签测试</title>
    <script>
        function _close() {
            window.close();
        }
    </script>
</head>
<body>
    <form method="post" >
        请输入姓名:<input type="text" name="textname" size="12" maxlength="6"></br>
        请输入密码:<input type="password" name="passname" size="12" maxlength="6"></br>
        请选择旅游的城市，可多选:
        <input type="checkbox" name="city" value="BJ">北京
        <input type="checkbox" name="city" value="SH">上海
        <input type="checkbox" name="city" value="XA">西安
        <input type="checkbox" name="city" value="HZ">杭州</br>
        请选择支付方式:
        <input type="radio" name="pay" value="cash">现金
        <input type="radio" name="pay" value="card">信用卡
        <input type="radio" name="pay" value="mobile">移动支付</br>
        出发日期:
        <input type="date">
        出发时间:
        <input type="time"></br>
        <input type="reset" value="复位">
        <input type="submit" value="提交">
        <input type="button" value="关闭窗口" onclick="_close()">
    </form>
</body>
</html>

点击链接进行测试：input