Form表单常用元素
1. 显示效果
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="https://www.runoob.com/try/demo_source/demo-form.php" method="post/get">
1.这是一个文本框:<input
type="text"
name="email"
size="40"
maxlength="50"
/>
<br />
2.这是一个密码框:<input type="password" />
<br />
3.这是一个复选框:<input type="checkbox" checked="checked" />
<br />
4.这是一个单选框:<input type="radio" checked="checked" />
<br />
5.这是一个提交键:<input type="submit" value="Send" />
<br />
6.这是一个复位键:<input type="reset" />
<br />
7.这是一个隐藏字段:<input type="hidden" />
<br />
8.这是一个下拉选择框:<select title="水果">
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
</form>
<form action="https://www.runoob.com/try/demo_source/demo-form.php" method="get">
9.这是一个带有预设的选项列表,在输入数据时会自动与选项列表项匹配:
<br>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<br>
10.这是一个可调文本输入框:
<br />
<textarea name="comment" rows="60" cols="20"></textarea>
</body>
</html>
本篇Over!撒花!(●'◡'●)