html表单元素
表单元素有哪些
-
<form>表示了文档中的一个区域，这个区域中包含有交互控制元件，用来像web服务器提交信息 -
<input>输入文本框，根据其特性，也可能是按钮型显示 -
<button>按钮 -
<lable>为input标签定义一个属性定义一个标记 -
<option>：定义下拉悬着 -
<select>：下拉框悬着性的东西 -
<textarea>：文本区，文字是可以换行的，相对input可以展示的东西更多
1，form元素讲解
form元素是用来定义html表单的，而html表单是一个组合，是用来收集不同类型的用户输入，在他里面可以嵌套其他的表单元素 input等
1.1 form元素的属性
增强解释：
accept_charset是指浏览器当前页面的的内容使用的字符集，比如utf-8,gbk等，
在进行字符集的编码以后，浏览器还要根据enctype进行一次编码，默认的是使用是url-encoded,也就是url编码，会对一些特殊的字符（除了英文字符，某些标点之外的符号，比如空格，中文等）进行url编码，一般是在前面加一个“%”号 详细的解释可以看这里
target是提交后在新的网页打开返回的信息还是在当前网页打开从后台返回的新的页面 target="_blank" 代表从新的页面打开，浏览器会新打开一个标签页， target="_self" 会刷新当前页面
代码示例：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form 元素 input 等
<label for="name">Male</label>
<input type="text" id="name" name="firstname">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
.
</form>
2，input元素讲解
input元素是表单元素之一，用来收集用户输入信息，根据type属性不同可以变化为多种形态
2.1 input元素的属性
| 属性 | 值 | 解释 |
|---|---|---|
| accept | mime_type | 规定通过文件上传来提交的文件类型，在上传文件的时候有用 |
| checked | checked | 规定此input元素首次加载时应当被选中checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
|
| disabled | disbled | 当input元素加载的时候禁用，置灰 |
| type | ... | 规定input元素的类型 |
| value | 具体value | 规定input 元素的值，在不同type下作用也不同 type="button", "reset", "submit" - 定义按钮上的显示的文本 \n type="text", "password", "hidden" - 定义输入字段的初始值\n type="checkbox", "radio", "image" - 定义与输入相关联的值；<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。 |
| name | field_name | 定义input元素的名称，提交到服务器时候使用的name = value中的name |
type的详细解释
| type值 | 代码 | 效果 | 解释 |
|---|---|---|---|
| text | 姓：<input type="text" name="firstname"> |
|
文字输入 |
| password |
用户：<input type="text" name="user"><br /> 密码： <input type="password" name="password">
|
|
把密码挡住 |
| submit | <input type="submit" value="Submit"> |
|
提交数据 |
| button | <input type="button" value="Hello world!"> |
|
就是一个简单的按钮 |
| checkbox |
<input type="checkbox" name="Bike"><br />我喜欢汽车：<input type="checkbox" name="Car"></form>
|
Paste_Image.png
|
可以多选 |
| radio | <input type="radio" checked="checked" name="Sex" value="male" /><br />女性：<input type="radio" name="Sex" value="female" /> |
|
只能单选 |
| file | <input type="file"> |
|
上传文件使用 |
| hidden | <input type="hidden" name="firstname" value="Mickey"> |
没有任何东西，在界面上影藏了 | 通常是提供给js使用的 |
| image | <input type="image" src="/i/eg_submit.jpg" alt="Submit" /> |
Paste_Image.png
|
定义图片形式的提交按钮，也就是和submit是一样的东西 |
| reset | <input type="reset" value="Reset" /> |
|
点击reset的话，会将输入表单中的数据清空 |
3， button按钮
button相对于input的
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。
<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
3.1 ， button的属性
| 属性 | 值 | 描述 |
|---|---|---|
| name | 按钮的名称定义 | 可以用来js获取该标签 |
| type | button , submit , reset | button是定义一个按钮， submit是定义一个提交类型的按钮， reset是清空当前form中的数据输入 |
| value | text | 规定按钮的初始值，可以使用js修改，并不是显示的值<button type="button" value = "value值">按钮显示的值</button> 效果是 |
4 ， select元素
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
4.1，属性及解释
| 属性名 | 属性值 | 解释 | 效果 | 示例 |
|---|---|---|---|---|
| diabled | disabled | 规定禁用下拉列表，无法下拉 | <select disabled="disabled"> <option value="volvo">Volvo</option> </select> |
|
| multiple | multiple | 规定可以选择多个选项卡,也就是一次会提交两个值，但是这种用法应该很少 | <select multiple="multiple" size="4"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select> |
可以选择多个值，但是windows下按ctrl+点击
Paste_Image.png
|
| name | name | 规定该下拉列表的名称 | <select name="carlist"> <option value="volvo">Volvo</option></select> |
只是定义了name提供给js使用 |
| size | 数字number | 规定该下拉列表中可见选项的数目 | 就像multiple中的数据一样，可以看到四个 |
5 ，option 标签
<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
请与 select 元素配合使用此标签，否则这个标签是没有意义的。
5.1， option属性
| 属性 | 值 | 描述 | 示例 | 效果 |
|---|---|---|---|---|
| disabled | disabled | 规定此选项首次加载的时候被禁用 | <select> <option>Volvo</option> <option disabled="disabled">Opel</option></select> |
|
| selected | selected | 规定选项打开列表时为选中状态 | <select> <option>Volvo</option> <option selected="selected">Saab</option></select> |
|
| value | text | 定义发送到服务器的选项值 | <form action="/example/html/form_action.asp" method="get" target="_blank"><select name="cars"> <option value="volvo">Volvo XC90</option></select><input type="submit" value="Submit" /></form> |
点击提交的话发送的数据是： cars=volvo |
6 textarea标签
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
6.1，textarea属性
| 属性 | 值 | 描述 | 示例 | 效果 |
|---|---|---|---|---|
| cols | number数字 | 该文本的可见宽度，应该是column（列）的缩写 | ||
| rows | number数字 | 该文本的可见行数 ，就是高度 | ||
| name | 定义该文本区的名字 | |||
| readonly | readonly | 定义该文本区为只读 ，不可编辑 | ||
| disabled | disabled | 定义该文本区的内容不可用，提交不到服务器 | ｜ |
textarea 标签的提交时 name属性对应的值 = 文本区的内容，和input标签相似
<form action="/example/html/form_action.asp" method="get" target="_blank">
<textarea name = "aaa" rows="3" cols="20">
w3school
</textarea>
<input type="submit" value="Submit" />
</form>
提交后实际提交的是aaa=w3school
