html5定制表单_动力节点Java学院整理

<form method="post" action=":8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit: <select id="fave" name="fave"> <optgroup label="Top Choices"> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> </optgroup> <optgroup label="Others"> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </optgroup> </select> </label></p> <input type="submit" value="Submit Vote"/> </form>

在Chrome中的效果如下：

optgroup元素只起组织作用，用户无法将其作为选项选中。

多行输入框

textarea元素生成的是多行文本框，用户可以在里面输入多行文字。包含的属性包括：
1）autofocus：在页面加载后文本区域自动获得焦点；
2）cols：文本区内的可见宽度，整型；
3）disabled：禁用该文本区；
4）form：文本区所属的一个或多个表单；
5）maxlength：文本区的最大字符数；
6）name：文本区的名称；
7）placeholder：文本区域预期值的简短提示；
8）readonly：文本区为只读；
9）required：文本区是必填的；
10）rows：文本区的可见行数，整型；
11）wrap：文本区的文本如何换行，包括：soft（默认），在表单提交时，文本区中的文本不换行；hard，在表单提交时，文本区中的文本换行（包含换行符），当使用该值时，必须规定cols属性。

<form method="post" action=":8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit: <select id="fave" name="fave"> <optgroup label="Top Choices"> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> </optgroup> <optgroup label="Others"> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </optgroup> </select> </label></p> <p><textarea cols="20" rows="5" wrap="hard" id="story" name="story">Tell us why this is your favorite fruit</textarea></p> <input type="submit" value="Submit Vote"/> </form>

在Chrome中的效果如下：

结果展示区域

output元素表示计算的结果。支持的属性包括：
1）for：输出域相关的一个或多个元素，中间用空格分隔；
2）form：输入字段所属的一个或多个表单；
3）name：对象的唯一名称（表单提交时使用）。

<form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber"> <fieldset> <legend>Price Calculator</legend> <input type="number" placeholder="Quantity" id="quant" name="quant"/> <input type="number" placeholder="Price" id="price" name="price"/> = <output for="quant name" name="res"/> </fieldset> </form>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!