input表单所有属性【web前端】

最新推荐文章于 2025-04-15 14:22:27 发布

原创最新推荐文章于 2025-04-15 14:22:27 发布 · 2.8k 阅读

17 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML中input表单的各种属性，包括value、readonly、disabled等，以及它们在网页设计中的应用实例。

input表单所有属性

新建一个文件后缀为HTML的文本文档，文件名为index.html，用于测试说明input的属性！

input的value属性:该属性用于定义input输入框的初始值，常用于举例说明该文本框输入的内容！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" value="账号">

</body> 

</html>

input的readonly属性:该属性规定了input为只读状态，不可以进行修改，但能作为表单的元素进行提交！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" readonly="readonly">

</body> 

</html>

input的disabled属性:该属性用于禁用input框，不可用、不可点击、不能进行表单提交！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" disabled>

</body> 

</html>

input的size属性:该属性用于规定输入框的长度，值越大输入框越长！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" size="10">
<input name="text" type="text" size="30">

</body> 

</html>

input的maxlength属性:该属性用于规定输入框输入内容的最大长度，常用于限制输入框的输入长度，超过长度的字符将无法输入！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" maxlength="15">

</body> 

</html>

input的placeholder属性:该属性主要用于提示输入框的内容，当光标在输入框的时，placeholder属性的提示内容会消失!

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" placeholder="请输入用户名">

</body> 

</html>

input的label属性:该属性主要用于点击文字就自动选择表单输入！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<label><input name="text" type="text" placeholder="请输入用户名"></label>
<label for="ak"><input name="text" type="text" placeholder="请输入用户名" id="ak"></label>

</body> 

</html>

input的autocomplete属性:该属性主要用于记录提交历史！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" autocomplete="on/off">

</form>
</body> 

</html>

input的required属性:该属性主要用于表单必填项！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" required>

</form>
</body> 

</html>

input的accesskey属性:该属性主要用于Alt+x自动选择表单！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" accesskey="x">

</form>
</body> 

</html>

input的autofocus属性:该属性主要用于自动选择表单！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" autofocus>

</form>
</body> 

</html>

input的multiple属性:该属性主要用于多文件上传！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="file" multiple>

</form>
</body> 

</html>

input的datalist属性:该属性输入首字就会提示!

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" value="输入明星" list="star">
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
<option>郭郭</option>
</datalist>
</form>
</body> 

</html>

input的fieldset属性:该属性主要是给form表单加框框！

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>
<fieldset>
<legend>用户登录</legend>
用户名：<input name="text" type="file">
</fieldset>
</form>
</body> 

</html>