表单下拉列表、多行文本、隐藏域

<select>下拉框

  用于定义一个下拉列表,select元素中的option标签用于定义列表在的可选项。

  属性:

disabled=“disabled”规定禁用该下拉列表(也可以在其他地方使用,该内容就会被禁用)

name  规定下拉列表的名称(一般后台人员会给你)

size 规定下拉列表中可选项的数目(显示几行,一般只显示一行)

selected  默认选中该项

例子:

<select name="area" disabled="diseabled" size="2">

  <option value="1" selected>北京</option>      (value是提交给后台服务器的,提交的是一个值,后台人员会给你,一般写英文或者数字,很少写汉字会乱码)

  <option value="2">上海</option>

</select>

<option>下拉框列表项

  浏览器将<option>标签中的内容作为<select>标签的菜单或是滚动列表中的一个元素显示。option元素位于select元素内部。

属性:

disabled=“disabled” 规定某一个列表不能选择

selected=“selected”   规定选项(在首次显示在列表中时)默认为选中状态

value   定义送往服务器的选择项

  

  使用optgroup为option分组,通过label指定分组的名称,optgroup里的名称为不可选择状态。

<textarea>多行文本(多行文本域)

  标签定义多行的文本输入,文本去区中可容纳无限数量的文本,可以通过cols和rows属性来规定尺寸,不过更好的办法是用 CSS 的 height 和 width 属性,textarea中间有空格即为有内容,就会required属性不生效。

属性

  cols=“30”  宽度

  rows=“10”  高度

  placeholder 规定描述文本区域预期值的简短提示(就是提示你写什么信息)

  readonly  规定文本区为只读(不可选中,不可填写)

  required  规定文本区域必填,不能和readonly一起用

多行文本是可以拖动改变大小的,如果你不希望你的布局被改变,可以使用css来控制:style"resize:none;"

示例:

<textarea placeholder="请填写你的信息" required></textarea>   (中间不能有空格和换行)

<input type="submit" />

内容必填,因为有required如果不填的话:会有提示。

隐藏域<input type="hidden">

定义隐藏的输入字段,隐藏域在页面中对于用户是不可见的。在表单中插入隐藏域的目的是在于手机或发送信息,以便于被处理表单的程序员所使用。

  有些时候我们要给用户一信息,让他们在提交表单时提交上来以确定用户身份。这个时候使用隐藏域再合适不过。

  隐藏域使用name和value属性来规定参数名和参数值

<foem action="">

  <input type="hidden" name="隐藏域的命" value="隐藏域的值"/>

  <input type="submit"/>

</form>

表单标签总结

1 表单域需要加name属性才可以把数据提交到服务器,只有不想提交的才不写name,如button。

2 单选按钮和复选按钮

  name相同即为一组

  一组单选按钮只能选中一个按钮

3 post和get方式的区别~

时间: 2024-10-29 05:26:57

表单下拉列表、多行文本、隐藏域的相关文章

《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 var form = document.getElementById("form1");//取得页面中id=form1的元素 var form1 = document.forms[0];//取得页面中的第一个表单 var myform = document.forms["myFo

行内表单 在统一行显示搜索框 下拉框 按钮

05===> 在同一行显示 搜索表单 下拉框表单 搜索按钮 清空按钮 使用了[行内表单] inline 属性可以让表单域变为行内的表单域 (让表单显示在同一行) <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline"></el-form> demo-form-inline是自带的 f

网上扒的form表单下拉列表

<html> <body> <form><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option

JavaScript基础 表单内的text文本输入框 获得焦点onfocus 失去焦点onblur

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

bootstrap注意事项(五)表单

1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列. <!DOCTYPE HTML><html><head> <link rel="stylesheet" hr

Bootsrtap表单

前面的话 表单是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 同样,表单也是Bootstrap框架中的核心内容,本文将详细介绍Bootstrap的表单 基础表单 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制 fi

Bootstrap学习笔记(四)-----Bootstrap每天必学之表单

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些控件包裹在.fo

Bootstarp学习教程(7) 表单

基本案例:“form-control”修饰的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;表单控件包裹在".form-group"中可以获得最好的排列 <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="keywords" cont

BootStrap--from表单模式:总结

BootStrap--from表单模式 表单的种类网上很多我不多赘诉,我包表单的模式总结了一下放在一个网页文件里面. 在附件里面:不能传html,改一下格式直接打开就好了 这里主要叙述一下样式什么的 包括大部分表单控件.文本输入域控件,还支持所有 HTML5 类型的输入控件: text.password.datetime.datetime-local.date.month.time.week.number.email.url.search.tel 和 color. 要说的有: 1.状态 焦点状态