来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

六、HTML表单设计

时间: 2019-09-06阅读: 192标签: 表单textarea 标签

本系列笔记来源于极客学院PHP工程师的学习笔记,仅供学习使用。

textarea代表HTML表单多行输入域textarea标签是成对出现的,以textarea开始,以/textarea结束

HTML的form标签

  • <form> 标签用于为用户输入创建 HTML 表单。用于向服务器传输数据
  • 常用属性:
    1.action -- 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)
    2.autocomplete -- 属性规定表单是否应该启用自动完成功能。
    3.method -- 数据传送的方法
  • 1). get -- 此方式传递数据量少,但是传递的信息显示在网址上。
  • 2). post --此方式传送信息多,而且不会把传递信息显示在网址上

4.enctype -- 表示将数据发送到服务器时浏览器使用的编码类型

  • 1). application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。
  • 2). multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
  • 3). text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符。

属性:

HTML的input标签

  • <input> 表单的单行输入域,<input> 是单标签 <input />
  • 常用属性:
    网上澳门金莎娱乐,1.type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
    2.name -- 此表单项名称
    3.value -- 输入域的值
    4.size -- 输入域的长度
    5.maxlength -- 输入域最多可以输入文字的长度
    6.checked -- 如果是选择型的输入域,代表已经被选择,值为checked
    7.readonly -- 输入域可以选择,但是无法修改 ,值为readonly
    8.disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如:9.disabled="disabled"
    10.placeholder -- 提示信息
    11.required -- 输入字段是必须的
    12.src -- 当使用图片来表示按钮时,代表图片的位置(URI)
    13.alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。
    14.autocomplete -- 属性规定输入字段是否应该启用自动完成功能。
    15.autofocus -- 输入字段加载页面时是否自动获取焦点
    16.pattern -- 属性规定用于验证输入字段的正则表达式。
  • type属性: 代表HTML表单中单行输入域(input)的表现方式
  • type属性取值:
    1.text -- 文字输入域(输入型)
    2.password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
    3.file -- 可以输入一个文件路径(输入型)
    4.checkbox -- 复选框.可以选择零个或多个(选择型)
    5.radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
    6.hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
    7.button -- 按钮(点击型)
    8.image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
    9.submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
    10.reset -- 重置按钮,可以把表单中的信息清空(点击型)
    11.color --定义拾色器。
    12.date --定义 date 控件(包括年、月、日,不包括时间)
    13.datetime --定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
    14.datetime-local --定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
    15.email --定义用于 e-mail 地址的字段。
    16.month --定义 month 和 year 控件(不带时区)。
    17.number --定义用于输入数字的字段。
    18.range --定义用于精确值不重要的输入数字的控件
    19.search --定义用于输入搜索字符串的文本字段。
    20.tel --定义用于输入电话号码的字段。
    21.time --定义用于输入时间的控件(不带时区)。
    22.url --定义用于输入 URL 的字段。
    23.week --定义 week 和 year 控件(不带时区)。

cols -- 多行输入域的列数rows -- 多行输入域的行数accesskey -- 表单的快捷键访问方式disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用readonly -- 输入域可以选择,但是无法修改tabindex -- 输入域,使用"tab"键的遍历顺序示例

HTML的textarea标签

  • <textarea> 表单的多行文本域,此标签是双标签
  • 常用属性:
    1.cols -- 多行输入域的列数
    2.rows -- 多行输入域的行数
    3.name -- 此表单项名称
    4.accesskey -- 表单的快捷键访问方式
    5.disabled --无法获得焦点,无法选择,灰色显示,表单中无效
    6.readonly -- 输入域可以选择,但是无法修改
    7.tabindex -- 输入域,使用"tab"键的遍历顺序
    8.autofocus -- 规定在页面加载后文本区域自动获得焦点。
    9.placeholder --规定描述文本区域预期值的简短提示。
    10.required -- 规定文本区域是必填的。
![](https://upload-images.jianshu.io/upload_images/10421047-051d343ce26c173f.png)

image.png



![](https://upload-images.jianshu.io/upload_images/10421047-30048bfcd82f8e1c.png)

image.png
form action="/demo/demo_form.asp"textarea name="abc"abc/textareabrbrinput type="submit" value="Submit"/form 

HTML的select标签

  • <select> 表单的选择列表标签,此标签是双标签
    常用属性:
    1.name -- 表单项名称
    2.size -- 选择域的高度
    3.multiple -- 可以有多个选择
    4.disabled -- 以灰色显示,在表单中不起任何作用
    5.tabindex -- 使用"tab"键的遍历顺序
    6.required -- 规定文本区域是必填的。
  • option标签:是<select>标签的列表项,此标签是双标签
  • 常用属性:
    1.value -- 说明选择项的值
    2.selected -- 此选择项已经被选择
    3.disabled -- 输入框无法获得焦点,以灰色显示,在表单中表示禁用
    4.tabindex -- 使用"tab"键的遍历顺序

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:六、HTML表单设计

关键词: