Essays and records to facilitate their access to fellow travelers.
#------------------------------------------------I ------------------------------------------- dividing line is a shame
1 , multi-line text code <textarea> </ textarea>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>描述</p> <textarea></textarea> <input type="submit" value="提交"/> <input type="reset" value=" </ HTML> </ form>>"Reset </ body>
The results show:
Enter the content can wrap
Multiple lines of text to increase the default value, the <textarea> </ textarea> input text is the default value of the tag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>描述</p> <textarea>这里填写描述内容</textarea> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
The results show:
Do not forget to add name attribute, because the background is required to submit data as
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>描述</p> <textarea name="moe">这里填写描述内容</textarea> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
The results show:
2 , a drop-down box <select> tag plus <option> tag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>下拉选项</p> <select> <option>北京</option> <option>上海</option> <option>南京</option> <option>成都</option> </select> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
The results show:
Code optimization, together with name and value attribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>下拉选项</p> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">南京</option> <option value="4">成都</option> </select> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form>
</body>
</html>
结果展示：
现在默认展示为北京，但是我想默认选择为南京，怎么办呢：
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>下拉选项</p> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
结果展示：
这样就可以提交下拉框选择的内容了，但是有一个问题是不能多选，继续优化加上size属性让用户可以都看所有选项，加入multiple属性可以多选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>下拉选项</p> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
结果展示：按上Ctrl键加鼠标点选
3、下拉框分组：<optgroup>
该标签是给下拉框分组，不可选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form enctype="multipart/form-data"> <p>下拉选项</p> <select name="city" size="10" multiple="multiple"> <optgroup label="中国"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </optgroup> </select> <input type="submit" value="提交"/> <input type="reset" value="重置"> </form> </body> </html>
结果展示：
