HTML表单

最新推荐文章于 2022-01-16 20:59:30 发布

余木尘

最新推荐文章于 2022-01-16 20:59:30 发布

阅读量217

点赞数

分类专栏： HTML 文章标签： HTML入门

本文链接：https://blog.csdn.net/weixin_45583017/article/details/100165352

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表单笔记

form

<body>
	
	<form action="" method="post">
		<!--提交的内容-->

		<input type="submit" value="提交按钮" />
	</form>
</body>

action属性

数据提交的路径，指向数据提交的服务器地址

method属性

数据提交的方式常用取值：get、post

如果采用 post 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 post 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
另一种情况是采用 get方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

input 输入域标签

type属性

取值：text、password、radio、checkbox、file、hidden、submit、image、reset、button

text：文本框
password：密码框（文本内容不可见）
radio：单选按钮
checkbox：复选框
file：文件上传组件
hidden：隐藏当前组件
submit：提交按钮，用来提交form表单信息
image：图形提交按钮
reset：重置按钮
button：普通按钮

id属性

为当前组件提供一个唯一的标识

name属性

为当前组件提供一个名称，服务器会根据当前的名称获取当前组件提供的数据

value属性

为当前组件设置值

size属性

设置大小

check属性

取值：check 设置单选框或复选框选中状态

readonly属性

是否只读取值：readonly 一般用于text、password、textarea

disable属性

设置组件是否可用取值：disable

Placeholder 属性

关键字提示

required属性

必填项

select标签

下拉列表框

name属性：下拉列表的名字
option子标签：下拉列表项
- selected=“selected”：下拉列表显示的项
- value：下拉项的值

textarea标签

文本域标签

row属性：设置文本域的行数
cols属性：设置文本域的列数

演示代码

<form action="/" method="get">
    账户：<input type="text" name="username"  placeholder="请输入您的账户" required="required"><br><!--username=admin-->
    密码：<input type="password" name="pwd" value="666" disabled="disabled" required="required"><br><!--pwd=123-->
    性别：
    <input type="radio" name="sex" value="male" checked="checked" >男<!--sex=male-->
    <input type="radio" name="sex" value="female" readonly="readonly">女
    <input type="radio" name="sex" value="other">其他 <br>
    爱好:
    <input type="checkbox"name="hobby" value="bas" disabled="disabled">篮球
    <input type="checkbox" name="hobby" value="foot">足球
    <input type="checkbox" name="hobby" value="rap"  checked="checked" >rap <br>
    <input type="hidden" name="id" value="007">
    文件上传： <input type="file" name="myfile"> <br>
    <textarea name="description" style="width: 250px;height: 250px;" placeholder="详细描述"></textarea><br>
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz" disabled="disabled">深圳</option>
        <option value="hz" selected="selected">杭州</option>
    </select><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
    <input type="image" src="img.png">
</form>

效果

在这里插入图片描述

余木尘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML表单

表单笔记form<body> <form action="" method="post">  <input type="submit" value="提交按钮" /> </form></body>action属性数据提交的路径，指向数据提交的服务器地址method属性数...
复制链接

扫一扫