HTML学习笔记-v1.4

最新推荐文章于 2024-02-23 00:38:23 发布

流云飞水

最新推荐文章于 2024-02-23 00:38:23 发布

阅读量396

点赞数

分类专栏： web 文章标签： checkbox web html 表单

本文链接：https://blog.csdn.net/baidu_25537855/article/details/46387047

版权

web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

使用<form>实现表单和输入

首先，表单是啥呢？表单就是一个区域，这个区域之内会有让用户写入文本的文本域或者是让用户选择的选框，还有下拉列表什么的，也就是与用户交流的门户，也是黑客攻击的门户哦~~~

"text"实现文本域的输入

来一个栗子来实现让用户输入姓名

<html>

<body>

<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>

</body>
</html>

type里面指定的关键词决定了你输入的文本显示类型，比如这样

"password"实现密码框

<html>

<body>

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>

那么，在密码框里输入的字符会以**********的形式显示出来

"radio"实现单选框

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

显示出来就是这样，这里要注意一下，<input >里的就是一个单选点，也就是如果代码这样写

<form>
<input type="radio" name="sex" value="male" /> 
<br />
<input type="radio" name="sex" value="female" /> 
</form>

就变成了这样~

大家应该会意了吧=w=，其实value指向的只是一个值为了方便后台操作

"Checkboxes"实现多选框

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

性质和上面是一样的，name是后台的索引关键字，value是关键字保存的内容

"action"和"submit"提交表单数据

<html>

<head>
<form name="input" action="html_form_action.asp" method="get">
用户名: 
<input type="text" name="user" value="流云飞水" />
<input type="submit" value="提交" />
</form>
</head>
<html>

这个流云飞水可不是我输入的哦，在文本框的value中可以设置默认输入的词组，submit是提交按钮，其中的字也可以在value中设置，点击提交后会将表单提交到action所指向
的网页，高大上吧~

表单杂项总结

"select"和''option"实现下拉表单

<html>

<body>

<form>
<select name="下拉列表">
<option value="volvo">我是第一个</option>
<option value="saab">楼上是第一个</option>
<option value="fiat">楼上是第一个的楼下</option>
<option value="audi">我是楼上是第一个的楼下的楼下</option>
</select>
</form>

</body>
</html>

并不难是吧~select定义下拉列表，option实现表单项

"textarea"文本域

<html>
<body>

<textarea rows="10" cols="30">
加油 >.<

row指定行数，cols指定列数，其之后都为文本默认显示内容

"button"实现按钮

<html>

<body>

<form>
<input type="button" value="Hello world!">
</form>

</body>
</html>

很普通啊~很正常啊~

用<fieldset>实现外框并用<legent>修饰

<html>
<body>
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>
</body>
</html>

额...不小心弄上水印了...名字还这么长....也不去管它~~我们如果把legend删掉

就这样了咯

注：

表单类只是还有很多，比如发送邮件type设置为post之类的，我们只要学会了表单的基本概念和大概形似就可以触类旁通看懂其他代码，我们就可以在看源码中学习，这才是我们的目的~

感想：

学习到这里我们已经可以去跟着一些网页的源码学习了，然而web的路还有很长，我们现在学的只是皮草...哦，不，是皮毛，嘿嘿，css、php、jason、js等很多都要去学习的，奋斗吧！最后，每日一句

<form>

</form>

流云飞水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记-v1.4

使用实现表单和输入首先，表单是啥呢？表单就是一个区域，这个区域之内会有让用户写入文本的文本域或者是让用户选择的选框，还有下拉列表什么的，也就是与用户交流的门户，也是黑客攻击的门户哦~~~"text"实现文本域的输入来一个栗子来实现让用户输入姓名名：姓：type里面指定的关键词决定了你输入的文本显示类型，比如这样"passwo
复制链接

扫一扫

专栏目录