HTML学习笔记 Part2

初步的打算是听讲啃书实战相结合,其实html还真是个挺好玩的东西。不过今天学的东西并不算多,好吧HTML其实没多少东西。

这节笔记就只有一个表单。。。

(画外音:你的ACM题又咕咕咕了?)


表单

HTML表单用来收集用户的输入,用它可以写出一些需要用户输入信息的页面,比如网站的注册和登录界面。实际做出来的效果如下:

表单用来获取用户的输入,用<form></form>进行定义。它一般要写上两个属性,一个是action,另一个是method。action属性定义在提交表单时执行的动作,简单来说就是把数据提交到服务器,如果不写,则action会设置成当前页面。对于method,method 属性规定在提交表单时所用的HTTP方法,一般是get或者post。get是默认方法,在使用

使用<inupt>标签来生成一个文本框,它包含很多的type(类型),这些不同的类型支持用户进行多种形式的输入。

比如,对于输入用户名这种常规文本,可以用<input type=”text”>来生成一个文本框,它长这个样:

然后是密码。我们知道密码在输入时一般要用密文输入,也就是说密码应该是不可见的,那么它的类型就要设置为“password”。这样出来的文本框就会显示出密文,像这样:

读者可以在上面试一下,输入效果是不同的(滑稽

上图“新用户注册”里,兴趣爱好一栏和性别一栏也是需要进行输入的,区别在于前者为多选框而后者为单选框。对于多选框,它的类型叫做checkbox,而单选框叫做radio。 它们还有两个属性,一个叫name,一个叫value,对于单选框,它的各个选项要保证在同一个name下,而value可以代表它的选项名称。

出生日期,它的input类型是date,代表日期,在浏览器里就会出现一个选择日期的文本框。像这样:(可能有些浏览器不支持这个文本框)

对于家庭住址,它实际上是一个下拉菜单栏,使用的不是<input>标签而是<select>标签,每一个下拉选项都作为一个<option>来填写,注意<select>和<option>都是双标签。

实际效果:

家庭住址:

提交按钮<input type=”submit” value=”提交”> ,它让原来的文本框变成了一个按钮。可以通过style=”height: ;width: “属性来修改这个按钮的大小。

大体上就这些内容啦,之后便是css相关内容的学习~


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。