美文网首页
HTML系列知识(五)

HTML系列知识(五)

作者: 纭微细雨 | 来源:发表于2019-10-21 21:57 被阅读0次

HTML文本框

<input type="text"> 即表示文本框

并且只能够输入一行

如果要输入多行

使用文本域<textarea>

注: <input> 标签很特别,一般是不需要写成<input />或者<input></input> 这样的。

并且<input> 这样的写法也是满足标准的

<input  type= "text">

设置文本框的长度 ,使用属性size

<input  type= "text"  size="10">

初始值使用属性value

<input type="text" value="有初始值的文本框">

有背景文字的文本框,使用属性placeholder

<input  type="text"  placeholder="请输入账号">

HTML密码框

输入的数据会自动显示为星号

<input type="password">

HTML表单

<form>用于向服务器提交数据,比如账号密码

action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去

<form   action="http://how2j.cn/study/login.jsp">

账号:<input  type="text"   name="name"> <br/>

密码:<input  type="password"   name="password"> <br/>

<input   type="submit"   value="登陆">

</form>

使用method="get" 提交数据 是常用的提交数据的方式

如果form元素没有提供method属性,默认就是get方式提交数据

get方式的一个特点就是,可以在浏览器的地址栏看到提交的参数,即便是密码也看得到

<form  method="get"  action="http://how2j.cn/study/login.jsp">

账号:<input  type="text"name="name"> <br/>

密码:<input  type="password"name="password"> <br/>

<input  type="submit"value="登陆">

</form>

使用method="post" 也可以提交数据

post不会在地址栏显示提交的参数

如果要提交二进制数据,比如上传文件,必须采用post方式

<form  method="post"  action="http://how2j.cn/study/login.jsp">

账号:<input  type="text"name="name"> <br/>

密码:<input  type="password"  name="password"> <br/>

<input  type="submit"  value="登陆">

</form>

get和post的区别

get

    是form默认的提交方式

    如果通过一个超链访问某个地址,是get方式

    如果在地址栏直接输入某个地址,是get方式

    提交数据会在浏览器显示出来

    不可以用于提交二进制数据,比如上传文件

post

    必须在form上通过 method="post" 显示指定

    提交数据不会在浏览器显示出来

    可以用于提交二进制数据,比如上传文件

HTML单选框

<input type="radio" > 表示单选框

两个单选,都可以同时选中。 为了达到,同一时间,只能选中其一的效果,需要使用分组

单选1 <input  type="radio">

单选2 <input  type="radio">

默认选中

默认选中 <input type="radio" checked="checked" >

分组:多个单选框,都在一个分组里,同一时间,只能选中一个单选框

设置name属性相同即可

<p>今天晚上做什么?</p>

学习java<input  type="radio"  name="activity"  value="学习java"> <br/>

东京热<input  type="radio"  checked="checked"  name="activity"  value="tokyohot"> <br/>

dota<input  type="radio"  name="activity"  value="dota"> <br/>

LOL<input  type="radio"  name="activity"  value="lol"> <br/>

HTML复选框 

<input  type="checkbox"> 即表示复选框

<p>今天晚上做什么?</p>

学习java<input  type="checkbox"  value="学习java"> <br/>

东京热<input  type="checkbox"  checked="checked"  name="activity"  value="tokyohot"> <br/>

dota<input  type="checkbox"  value="dota"> <br/>

LOL<input  type="checkbox"  value="lol"> <br/>

HTML下拉列表

<select> 即下拉列表

需要配合<option>使用

<select>

 <option>苍老师</option>

 <option>高树玛利亚</option>

 <option>遥美</option>

</select>

设置高度 ,使用属性size

<select  size="2">

 <option>苍老师</option>

 <option>高树玛利亚</option>

 <option>遥美</option>

</select>

设置可以多选,使用ctrl或者shift进行多选

<select  size="3"  multiple="multiple">

 <option>苍老师</option>

 <option>高树玛利亚</option>

 <option>遥美</option>

</select>

默认选中,对option元素设置selected="selected" 属性

<select  size="3"  multiple="multiple">

 <option>苍老师</option>

 <option  selected="selected">高树玛利亚</option>

 <option  selected="selected">遥美</option>

</select>

相关文章

  • HTML系列知识(五)

    HTML文本框 即表示文本框 并且只能够输入一行 如果要输入多行 使用文本域 注: 标签很特别,一般是不需要写...

  • HTML系列知识(四)

    HTML块 div span 这两种标签都是布局用的 这种标签本身没有任何显示效果 通常是用来结合css进行页面布...

  • HTML系列知识(六)

    HTML文本域 即文本域 与文本框不同的是,文本域可以有多行,并且可以有滚动条 abcdef 设置宽度和行数 ,使...

  • HTML系列知识(三)

    HTML图像 即图像标签,需要设置其属性 src指定图像的路径 如果是本地文件,只需把图片放在同一个目录下即可,s...

  • HTML系列知识(二)

    HTML段落 标签即表示段落,是paragraph的缩写,自带换行效果 在p标签中的文本会自动换行,不在p标签中的...

  • HTML系列知识(一)

    HTML标签 HTML是Hyper Text Markup Language 超文本标记语言 的缩写 HTML是由...

  • 常用标签&选择器

    本系列是前端基础的学习笔记,只是方便自己学习记忆的。 html、xhtml、xml、html5 一些历史知识而已啦...

  • HTML基础知识二

    知识点导航: 一、h 和 p

    HTML标签是分等级的,HTML将所有的标签分为两种: h 系列 h 是容...

  • 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者...

  • 前端知识点系列一:HTML

    持续更新...... 1. Doctype作用 声明位于位于HTML文档中的第一行,处于 标...

网友评论

      本文标题:HTML系列知识(五)

      本文链接:https://www.haomeiwen.com/subject/iwsxvctx.html