表单及相关的设置
2018-07-13 本文已影响0人
常伟波
表单 <form></form>
- 属性的类型type
1.type(text) 文本框输入的格式
属性：
| name | value | method | enctype |
|---|---|---|---|
| 提交时必须设置的name | 设置文本框的默认的内容 | 有get和post两个值，get会显示内容；post不会显示，提交时以一个包的形式进行，比较安全 | enctype='multipart/from-date'上传文件是要加上 |
图片.png
2 .type(submit) 提交内容
| value | placeholder |
|---|---|
| 改变按钮的内容 | 设置提示信息（不能与value同时设置） |
图片.png
3.type(password) 密码输入格式
| type=‘password’ | 密码格式 输入文本框 |
|---|
图片.png
4.type(radio) 单选框
| .type(radio) | value | name |
|---|---|---|
| radio是单选框的一个标着 | 表示每个不同的选项，代表的不同的含义/内容 | 设置文本框的默认的内容必须设置相同的name值，表示是同一个组的，不同的话不代表同一组，就能选择择多个 |
图片.png
5.type(checked) 多选框
| .type(checked) | value | name | checked |
|---|---|---|---|
| checked是多选框的一个标着 | 表示每个不同的选项，代表的不同的含义/内容 | 设置文本框的默认的内容必须设置相同的name值，表示是同一个组的 | 设置默认选项 |
图片.png
下拉列表
| select | value | name | multiple |
|---|---|---|---|
| 创建一个下拉列表 <optgroup></optgroup>给下拉列表设置不同的组 <option></option>设置下拉列表的列表项 |
表示每个不同的选项，代表的不同的含义/内容 | name表示这个下拉列表 | 设置multiple=‘multiple’属性，可以选择多个 |
账号密码那一块写错了
图片.png
文本域
| <textarea></textarea> | name |
|---|---|
| 创建一个文本域，可以设置宽高 | name表示输入的类型 |
重置按钮
| type='reset' | 设置重置按钮 |
|---|
<input type='reset'>
设置按钮
| <input type='button'> | <button>提高</button> |
|---|---|
| 单纯的按钮设置 | 可以加入type属性，可以实现功能，如：type=‘submit’…… |
点击字符选中文本框
-<label for='指向表单项的id'>起的名字</label>-
Snipaste_2018-07-13_00-48-26.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框输入</title>
</head>
<body>
<form action="表单成功提示.html" name="username">
<br>
<label for="zhanghao">账号</label>
<input type="text" id="zhanghao">
<br>
<label for="pwd">密码</label>
<input type="password" name='password' id="pwd">
<br><br>
性别：<input type="radio" name='gender' value="male" id="male">
<label for="male">男</label>
<input type="radio" name='gender' value="female" id="female">
<label for="female">女</label>
<br><br>
爱好：<input type="checkbox" name="hobby" value="sleep" checked="checked" id="sleep">
<label for="sleep">睡觉觉</label>
<input type="checkbox" name="hobby" value="eat" checked="checked" id="eat">
<label for="eat">吃好吃的</label>
<input type="checkbox" name="hobby" value="play-game" id="play-game">
<label for="play-game">玩游戏</label>
<input type="checkbox" name="hobby" value="bean" class="bean" id="bean">
<label for="bean">打豆豆</label>
<br><br>
喜欢的明星：<select name="star" id="">
<optgroup label="女明星">
<option value="杨幂">杨幂</option>
<option value="迪丽热巴">迪丽热巴</option>
<option value="刘亦菲">刘亦菲</option>
</optgroup>
<optgroup label="男明星">
<option value="胡歌">胡歌</option>
<option value="李易峰">李易峰</option>
<option value="张杰" selected="selected">张杰</option>
</optgroup>
</select>
<br><br>
自我介绍<textarea name="info" >
</textarea>
<br><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
