HTML中的表单from

HTML 表单

表单是一个包含表单元素的区域。

表单通常用于让用户能够进行输入操作使用的,例如常见的登录、搜索、注册、图片上传等等。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单中的基础标签

表单是让用户进行信息输入的,将输入的数据提交到服务器上,服务器再根据提交的数据进行分析验证反馈结果。

  1. action:指定服务器地址。

  2. method:指定表单数据的提交方式。

    get:默认的提交方式,get方式提交的数据会在地址栏中显示出来,很不安全,所能提交的数据量比较小,效率高。
    post:效率低,安全,携带大量的数据,不会在地址栏中显示。
    
标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 元素的标签,一般为输入标题
<fieldset>定义了一组相关的表单元素,并使用外框包含起来
<legend>定义了 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>指定一个预先定义的输入控件选项列表
<keygen>定义了表单的密钥对生成器字段
<output>定义一个计算结果

注意:表单中的数据想要提交,一定要有name属性存在。
表单中所有的内容都是通过以下三个标签组成的:
input、textarea、select

HTML 表单类型input

多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

类型说明
button按钮类型,与<button>标签一致
checkbox复选按钮
date选着日期表单
number表单只能输入数字数字
password密码表单,自动隐藏内容
text文本输入框
radio单选按钮
file文件上传按钮
submit表单提交按钮
reset重置

文本域(Text Fields)

文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

  1. List item

密码字段(PassWord)

密码字段通过标签<input type=“password”> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:
注意:密码字段字符不会明文显示,而是以星号或圆点替代。

单选按钮(Radio Buttons)

<input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male
Female

复选框(Checkboxes)

<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

<input type=“submit”> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值