文章目录
表单和表单元素标签
- 表单:是一个区域,采集用户信息
- 表单元素:文本框、按钮、单选、复选、下拉列表、文本域
一、表单 form
<form>
标签用于为用户创建 HTML 表单。表单内包含表单元素
- 表单作用:表单用于向服务器传输数据。
<form>
标签,用法如下:
<form action="URL">
表单元素
</form>
action
为 form 标签的一个元素,该元素的值为 URL 用于规定当提交表单向何处发送表单数据
<form>
其他的更多属性:传送门
二、表单元素标签 input select textarea 等等
1. 文本框和密码框
即 <input>
标签的 type 属性为 text 或者 password
<form>
<input type="text" name="text"/> <!--当前为文本框-->
<input type="passowrd name="psd" /> <!--当前为密码框-->
</form>
通常每个表单都会带有一个 name 属性,这个name 属性就是这个表单数据的名字
- name属性的作用:当表单的元素的数据提交到后端的时候,那么这时候后端在处理数据的时候,就需要知道这个数据来源于哪个表单元素。这就是他的作用
- 简单的概括一句,就是 告诉后端要处理的数据来源于哪个表单元素
2. 提交按钮、重置按钮
即 <input>
标签的 type 属性为 sublime 或者 reset
<form>
<input type="sublime" value="提交按钮"/>
<input type="reset" value="重置按钮" />
</form>
value 属性:input 元素的值。
- 在按钮中也就是
<input>
标签显示的文本
3. 单选框、复选框
单选框:顾名思义 只能选择一个选项,复选框即可以选择多个选项
<form>
<input type="radio 或 checkbox"
value="值" name="名称" checked="checked">
</form>
checked 属性:当设置 checked="checked"
时,该选项被默认选中
性别:
<input type="radio" value="boy" name="gender" checked="checkbox"/>男
<input type="radio" value="girl" name="gender"/>女
<br />
爱好:
<input type="checkbox" value="1" name="music">音乐
<input type="checkbox" value="2" name="sport">体育
<input type="checkbox" value="3" name="code" checked="checkbox">写代码
- 对于单选框,我们要注意的是 name的属性的值要一致!!!
- 对于复选框,name 的属性的值可以不用
4. 下拉列表框
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
</select>
selected 属性:当设置 selected="selected"
时,该选项被默认选中,作用和上述的 checked 属性相同。
5. 文本域
<textarea rows="行数" cols="列数">文本</textarea>
- 在
<textarea>
标签内写下的文字,会默认的出现到编辑区域内,作为提示性文本
代码运行网页:传送门 各位小伙伴可以自行感受一下,代码如下
(补充:表单元素没有自动换行的效果,为了展示更美观,所以我加上了 <br />
标签进行换行)
<form>
账号:<input type="text" name="userName"/>
<br />
密码:<input type="password" name="userPsd"/>
<br />
性别:
<input type="radio" value="boy" name="gender" checked="checkbox"/>男
<input type="radio" value="girl" name="gender"/>女
<br />
爱好:
<input type="checkbox" value="1" name="music">音乐
<input type="checkbox" value="2" name="sport">体育
<input type="checkbox" value="3" name="code" checked="checkbox">写代码
<br />
年级:
<select>
<option>大一</option>
<option>大二</option>
<option>大三</option>
<option>大四</option>
<option selected="selceted">请选择</option>
</select>
<br />
个人简介:
<br />
<textarea cols="50" rows="10">
在这里输入内容...
</textarea>
<br />
<input type="submit" value="点击确认" />
<input type="reset" value="点击重置" />
</form>