表单的基本功能
HTML 表单的基本功能1. 自动填充
浏览器会 “记住” 表单中的数据。
可以设置 autocomplete 属性为 off 关闭这个功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
>
名字：<input type="text" name="name" /><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
2. 指定目标显示位置
form 元素有一个 target 属性，用于指定目标页以什么方式打开。可以设置为 _blank（在新标签页中打开）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
target="_blank"
>
名字：<input type="text" name="name" /><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
3. 设置默认值
可以为 input 元素指定 value 属性设置文本输入框的默认值。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
target="_blank"
>
名字：<input type="text" name="name" value="zltzlt" /><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
4. 自动聚焦
可以设置 input 元素的 autofocus 属性，使得一打开页面焦点就聚焦在那个 input 上。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
target="_blank"
>
名字：<input
type="text"
name="name"
value="zltzlt"
autofocus
/><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
5. 禁用元素
禁用某个元素可以指定其 disabled 属性。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
target="_blank"
>
名字：<input
type="text"
name="name"
value="zltzlt"
autofocus
disabled
/><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
这样第一个 input 元素基本废掉了，不能修改，不能选中与拷贝，也不会被提交到服务器上。
我们可以用 readonly（只读）解决这个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form
action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
method="post"
autocomplete="off"
target="_blank"
>
名字：<input
type="text"
name="name"
value="zltzlt"
autofocus
readonly
/><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
页:
[1]