1、HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。
我们可以使用 标签来创建表单:
<form> input元素 </form>
网页中的表单用于将本地的数据上传至服务器form的属性
action 表单要提交的服务器的地址
多数情况下被用到的表单标签是输入标签 。
输入类型是由 type 属性定义。
2、常用的输入类型
文本域(Text Fields)
文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
实例
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
浏览器显示如下:
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
密码字段
密码字段通过标签 来定义:
实例
<form> Password: <input type="password" name="pwd"> </form>
提交按钮(Sumbmit)
定义了提交按钮。
当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
实例
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
浏览器显示效果如下:
单元按钮(Radio Buttons)
标签定义了表单的单选框选项:
实例
<form action=""> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form>
浏览器显示效果如下:
复选框(Checkboxes)
定义了复选框。
复选框可以选取一个或多个选项:
实例
<form> <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br> <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车 </form>
浏览器显示效果如下: