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>