HTML表单和输入
2019-12-02 本文已影响0人
Insight_
HTML表单用于收集不同类型的用户输入
创建文本字段(Text field)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>创建文本字段</title>
</head>
<body>
<form action="">
First name:<input type="text" name="first name"><br>
Last name:<input type="text" name="last name">
</form>
<p></b>注意</b>表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符</p>
</body>
</html>
HTML表单
表单是一个包含单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等,表单使用表单标签<form>来设置:
<form>
.
input元素
.
<form>
单选按钮(Radio Button)
<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>
复选框(Checkboxes)
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car"> I have a car
</form>
提交按钮(Submit Button)
<form name =“input” action="html_form_action.php" method="get">
Username:<input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML表单标签
- <form>:定义用户输入的表单
- <input>:定义输入域
- <textarea>:定义文本域(一个多行的输入控件)
- <label>:定义了<input>元素的标签，一般为输入标题
- <fieldset>:定义了一组相关的表单元素，并使用外框包含起来
- <legend>:定义了<fieldset>元素的标题
- <select>:定义了下拉选项列表
- <optgroup>:定义了选项组
- <option>:定义了下拉列表中的选项
- <button>:定义了一个点击按钮
- <datalist>:指定一个预先定义的输入控件选项列表
- <keygen>:定义了表单的秘钥对生成器字段
- <output>:定义了一个计算结果
