题目只能有30个字,不能写全,其实今天我们要学习的内容有三个,第一,下拉列表表单,第二,多行文字输入表单,第三,数据集表单。
开始学习吧!
前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践,今天我们来学习其他包含在<form></form>之间的元素。
带有下拉列表的表单
我们在一些网站填写注册信息时,经常会遇到选择"生活所在地"的操作,因为中国的地名是固定的,因此页面会为我们提供一个下拉列表选项,我们直接点选即可,就不需要输入文字了,这样操作的好处在于不会出现拼写错误。例如:
写这个功能我们需要介绍一组新标签<select></select>。"select"(选择)。在这个标签中再添加<option></option>。"option"(选项)。这样就可以写出带有下拉列表的表单了,示例代码如下:
<select><option></option></select>
这段代码我们继续在昨天的"表单.HTML"文件中添加即可,在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可!与这个图片提交按钮共用一个<form></form>标签!
下面我们为多选表单添加名称,示例代码如下:
请选择省份<select><option></option></select>
下面我们添加不同选项,示例代码如下:
请选择省份
<select >
<option >河北</option>
<option >山东</option>
<option >河南</option>
<option >海南</option>
<option >江苏</option>
<option >安徽</option>
</select>
<br><br>
为了规范起见,我们为表单信息添加name和value属性,示例代码如下:
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江苏</option>
<option value="Anhui">安徽</option>
</select>
<br><br>
大家要注意的是,在下拉列表表单中,name写在<select>中,value写在<option>中。
页面效果如下:
这里告诉大家一个规律,下拉列表表单默认显示第一个<option></option>中的文字内容。
如果您想改变这个默认显示,请在需要显示的<option>中添加selected属性,并赋值为"selected"。
示例代码如下:
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan" selected="selected">河南</option>
<!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>
页面效果如图:
多行文字输入表单
我们在西瓜视频上发布视频时会被要求填写视频描述,页面中的输入框不是像下图这么短的单行输入框。
而是多行输入框,如图:
使用<textarea></textarea>标签即可添加这样的输入框,不过要设置row(列)和cols(行)属性的数值。示例代码如下:
<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>
这段代码添加到</select><br><br>之后,与其共同使用一个<form></form>标签。
下面我们为这个多行输入框添加一些提示和限制。
首先,添加提示文字,和type="text"的<input/>标签一样,都是使用placeholder属性。
第二,我们限制一下字数,使用maxlength(最大长度)属性。
第三,在页面加载完成后,直接让光标停留在输入框中,使用autofocus属性。
下面看看如何写吧,示例代码如下:(不要忘记写好name属性!)
<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>
页面效果如图:
如果刷新页面不能正确显示,请尝试关闭后重新打开!
数据集表单
数据集表单实际上就是一个将不同选项或信息打包上传的设置。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。(W3school)
这个数据集有三个部分组成,首先是<fliedset></fliedset>,这个标签不会显示,只是告诉浏览器这里的数据要打包。
第二是<legend></legend>,"legend"(说明),这里添加数据集名称。
第三就是我们之前学到的那些标签了。
示例代码如下:
<fliedset> <legend>信息打包</legend> </fliedset>
下面我们使用这段代码把form2打包一下吧。示例代码如下:
<form>
<fieldset><!--开始-->
<legend>信息打包</legend><br>
<!--标题-->兴趣爱好:<br>
<input type = "checkbox" name = "hobby" value = "reading"/>读书
<input type = "checkbox" name = "hobby" value = "film"/>电影
<input type = "checkbox" name = "hobby" value = "painting"/>绘画
<input type = "checkbox" name = "hobby" value = "music"/>音乐
<br>
最高学历:<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
请选择省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山东</option>
<option value="Henan" selected="selected">河南</option><!--选中这个选项-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江苏</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--结尾-->
<input type = "image" src = "img/示例图片/submit.jpg"/><br>
<input type="reset" /><br>
<input type = "submit" value = "submit"/>
</form>
页面效果如下:
今天的内容结束了!
如果您喜欢我的教程请关注我,点赞也能让我充满动力!
HTML完整学习目录HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
,