Form表单

最新推荐文章于 2024-11-06 06:18:32 发布

原创最新推荐文章于 2024-11-06 06:18:32 发布 · 848 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

Html 专栏收录该内容

5 篇文章

订阅专栏

Form表单


<body>
<form method="post" action="">
	表单代码
</form>
</body>

 <form 可以传入表单属性></form>

设定post提交方式时，需要设定entype属性

<form action="" method="post"  enctype="multipart/form-data">

一般表单中标签要设置name属性，便于提交拿到对应的数据

1. 属性：

		method=‘post’/'get' (表单上传采用的方式)
			post方式为加密方式
			get方式为明码方式缺乏安全性且有长度限制
		    action='" (表单上传的位置)
		enctype="multipart/form-data"
			设定为上传文件模式

2.表单内标签：

a.input标签

用户名：<input type="text" name="username"/><br/>

input属性：
		type='text'/'password'/'radio/checkbox/file/hidden'
			text输入明码显示
			password输入加密显示
			radio单选框，为只能勾选一个，需要两个或多个name属性设置相同
			checkbox复选框，设置name属性相同，抱枕复选框为同一组
			file上传文件的文件域，需要提前设定form中enctype属性='multipart/formdata’
			hidden表单源码中可以看到值，用户不会在界面上看到值。一般用来存储一些程序用得到，用户没啥用的数据，比如说：id

b.非input标签

下拉列表框select:：option为选择项

 年：<select name="year">
        <option>---请选择年份---</option>
        <option>1900</option>
     </select>

多行文本域textarea: cols=‘50’ row='5’设置行列大小

<textarea name="personinfo" cols="50" row="5"></textarea>

3.扩展 lable 标签（增加用户体验）

设置单选按钮时，为客户能单击按钮后面的字一样可以达到选择效果，使用lable标签进行优化

lable标签用for关联控件id

性别：<input type="radio" name="sex" id="nan" value="1" />
<label for="nan">男</label>